Bootstrap Snippet WordPress Navigation using HTML CSS jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<nav class="navbar navbar-default custom-nav">  <!-- navbar-fixed-top -->
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="slide-collapse" data-target="#slide-navbar-collapse" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <!-- <a class="navbar-brand" href="#">Brand</a> -->
            </div>
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="slide-navbar-collapse">
                  <?php 
                      wp_nav_menu(['theme_location' => 'primary','depth'=> 7, 'menu_class' => 'nav navbar-nav']);
                      // 'walker' => new wp_bootstrap_navwalker(),
                  ?>
                <!-- <ul class="nav navbar-nav">
                    <li><a href="#">Link <span class="sr-only">(current)</span></a></li>
                    <li><a href="#">Link</a></li>
                    <li class="dropdown">
                        <a href="https://www.google.com/" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                            <li><a href="#">Separated link</a></li>
                            <li><a href="#">One more separated link</a></li>
                            <li class="dropdown-submenu">
                                <a href="https://www.google.com/" data-toggle="dropdown">SubMenu 1</a>
                                <ul class="dropdown-menu">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
@media only screen and (max-width: 767px) {
            #slide-navbar-collapse {
                position: fixed;
                top: 0;
                left: 15px;
                z-index: 999999;
                width: 280px;
                height: 100%;
                background-color: #f9f9f9;
                overflow: auto;
                bottom: 0;
                max-height: inherit;
                visibility: visible;
            }
            .menu-overlay {
                display: none;
                background-color: #000;
                bottom: 0;
                left: 0;
                opacity: 0.5;
                filter: alpha(opacity=50);
                /* IE7 & 8 */
                position: fixed;
                right: 0;
                top: 0;
                z-index: 49;
            }
            .navbar-fixed-top {
                position: initial !important;
            }
            .navbar-nav .open .dropdown-menu {
                background-color: #ffffff;
            }
            ul.nav.navbar-nav li {
                border-bottom: 1px solid #eee;
                width: 100%;
            }
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
$(document).ready(function() {
    $('ul li:has(ul)').addClass('dropdown');
    $('li.dropdown ul').addClass('dropdown-menu');
    $('ul.dropdown-menu li:has(ul)').addClass('dropdown-submenu');
    $('li.menu-item-has-children > a').attr('data-toggle','dropdown'); 
    
       $('[data-toggle="slide-collapse"]').on('click', function() {
            $navMenuCont = $($(this).data('target'));
            $navMenuCont.animate({
                'width': 'toggle'
            }, 350);
            $(".menu-overlay").fadeIn(500);
        });
        $('[data-toggle="dropdown"]').after('<span class="down-arrow"></span>');
        $(".menu-overlay").click(function(event) {
            $(".navbar-toggle").trigger("click");
            $(".menu-overlay").fadeOut(500);
        });
        var windowWidth = $(window).width();
        if (windowWidth > 767) {
            $('ul.nav li.dropdown').hover(function() {
                $(this).find('>.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
            }, function() {
                $(this).find('>.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
            });
            $('ul.nav li.dropdown-submenu').hover(function() {
                $(this).find('>.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
            }, function() {
                $(this).find('>.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
            });
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"WordPress Navigation"
Bootstrap 4.1.1 Snippet by syamacl45

Related: See More

Questions / Comments:

"WordPress Navigation" Bootstrap 4.1.1 Snippet by syamacl45

Related: See More

Questions / Comments:

"WordPress Navigation"
Bootstrap 4.1.1 Snippet by syamacl45