The menu hamburger appears on both mobile and desktop when I shrink the window. The problem is that its functionality does not work and nothing happens when I click on it. Ultimately, when clicked, a menu should expand. Any help on this topic welcome.
Additional note:
Interesting fact that when I open the link to the page via Instagram hamburger menu works. When I open directly from the browser (I tested Safari and Chrome), the hamburger is visible, but when I click it doesn’t work.
<!-- header -->
<header id="site-header" class="fixed-header">
<div class="header-main">
<div class="container">
<div class="header-inner clearfix">
<div class="medium-header-container">
<!-- Site logo -->
<a href="/" id="site-logo"></a>
<!-- Mobile burger icon -->
<div id="mobile-nav-button" class="hidden-desk hidden-tab">
<div id="mobile-nav-icon">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
<!-- header nav menu -->
<nav id="header-nav">
<ul id="nav-ul" class="menu font-montserrat-reg clearfix">
<!-- Nav item - single tier drop down -->
<li class="menu-item menu-item-has-children">
<a href="/">Home</a>
</li>
<!-- Nav item - single tier drop down -->
<li class="menu-item menu-item-has-children">
<a href="portfolio.html">Portfolio</a>
</li>
<!-- Nav item - single tier drop down -->
<li class="menu-item menu-item-has-children">
<a href="video.html">Video</a>
</li>
<!-- Nav item - no drop down -->
<li class="menu-item menu-item-has-children">
<a href="about.html">About</a>
</li>
<!-- Nav item - with two tier drop down -->
<li class="menu-item menu-item-has-children">
<a href="blog.html/">Blog</a>
</li>
<!-- Nav item - single tier drop down -->
<li class="menu-item menu-item-has-children">
<a href="contact.html">Contact</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</header>
I am sharing js code too:
// Mobile nav menu
intent_theme.mobile_nav_menu = function(){
/* -- nav menu button click -- */
$( '#mobile-nav-button' ).click(function(e) {
e.preventDefault();
$('#mobile-nav-button').toggleClass('active');
$('#site-header,#header-nav,#main-content,.header-inner,footer').toggleClass('menu-active');
});
/* -- mobile drop down menu(s) -- */
$('.sub-drop-icon').on('click', function(e) {
e.preventDefault();
if(!isXLarge()) {
if (!$(this).hasClass('sub-second-drop')){
// first level drop down
$(this).parents('.menu-item').find('> .sub-menu-first').slideToggle(250).toggleClass('opened');
} else {
// second level drop down
$(this).parents('.menu-item').find('> .sub-second-tier').slideToggle(250).toggleClass('opened');
}
$(this).toggleClass('fa fa-angle-down fa fa-angle-up');
}
});
// close the mobile push menu when click on content
$('#main-content,footer').on('click', function() {
// check if push menu is open
if($('#mobile-nav-button').hasClass('active')){
// hide the push menu
$('#header-nav,#main-content,.header-inner,footer').removeClass('menu-active');
$('#mobile-nav-button').removeClass('active');
}
});
}