<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">
<li><a href="#">3rd level dropdown</a></li>
<li><a href="#">3rd level dropdown</a></li>
<li><a href="#">3rd level dropdown</a></li>
<li><a href="#">3rd level dropdown</a></li>
<li><a href="#">3rd level dropdown</a></li>
<li class="dropdown-submenu">
<a href="https://www.google.com/" data-toggle="dropdown">SubMenu 2</a>
<ul class="dropdown-menu">
<li><a href="#">3rd level dropdown</a></li>
<li><a href="#">3rd level dropdown</a></li>
<li><a href="#">3rd level dropdown</a></li>
<li><a href="#">3rd level dropdown</a></li>
<li><a href="#">3rd level dropdown</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Link</a></li>
</ul> -->
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
@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%;
}
.navbar-nav .open .dropdown-menu .dropdown-header, .navbar-nav .open .dropdown-menu>li>a {
padding: 10px 20px 10px 15px;
}
.down-arrow {
position: absolute;
top: 2px;
right: 0px;
width: 35px;
height: 35px;
background-color: #303f9a;
cursor: pointer;
color: #fff;
line-height: 1.9;
}
.down-arrow:before {
content: "\f107";
font-family: FontAwesome;
position: absolute;
right: 11px;
top: 0px;
font-size: 17px;
font-weight: 600;
}
}
.dropdown-submenu {
position: relative;
}
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-top: -1px;
}
li.dropdown a {
display: block;
position: relative;
}
ul.dropdown-menu li {
border-bottom: 1px solid #eee;
}
.dropdown-menu {
padding: 0px;
margin: 0px;
border: none !important;
}
li.dropdown.open {
border-bottom: 0px !important;
}
li.dropdown-submenu.open {
border-bottom: 0px !important;
}
li.dropdown-submenu>a {
font-weight: bold !important;
}
li.dropdown>a {
font-weight: bold !important;
}
.navbar-default .navbar-nav>li>a {
font-weight: bold !important;
padding: 10px 28px 10px 15px;
}
@media (min-width: 767px){
li.dropdown-submenu>a {
padding: 10px 20px 10px 15px;
}
.down-arrow {
position: absolute;
top: 8px;
right: 0px;
width: 25px;
height: 25px;
background-color: transparent;
cursor: pointer;
color: #555;
line-height: 1.5;
}
.down-arrow:before {
content: "\f107";
font-family: FontAwesome;
position: absolute;
right: 7px;
top: 0px;
font-size: 17px;
font-weight: 600;
}
}
.up-arrow {
position: absolute;
top: 13px;
right: 1px;
background-color: blue;
width: 15px;
height: 15px;
}
nav.navbar.navbar-default.custom-nav {
box-shadow: none;
background-color: transparent;
border: 0px;
height: auto;
margin-top: 28px;
margin-bottom: 0;
}
.dropdown-submenu>.down-arrow:before {
-webkit-transition: -webkit-transform .3s ease-in-out;
transition: transform .3s ease-in-out;
}
.dropdown>.down-arrow:before {
-webkit-transition: -webkit-transform .3s ease-in-out;
transition: transform .3s ease-in-out;
}
.dropdown-submenu.open>.down-arrow:before {
content: "\f107";
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.dropdown.open>.down-arrow:before {
content: "\f107";
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
$(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);
});
$('ul.nav li.dropdown').hover(
function(){ $(this).addClass('open') },
function(){ $(this).removeClass('open') }
)
}
$('.dropdown a').removeAttr( "data-toggle" );
$('.dropdown a').removeAttr( "data-toggle" );
$('span.down-arrow').attr("data-toggle", "dropdown");
if (windowWidth < 767) {
$('span.down-arrow').on('click', function(event) {
event.preventDefault();
event.stopPropagation();
$(this).parent().siblings().removeClass('open');
$(this).parent().toggleClass('open');
// $('span', this).toggleClass("down-arrow up-arrow");
});
}
});
