I am currently working on a WordPress theme and facing an issue:
When I click the hamburger menu without scrolling down the page, the mobile menu slides in smoothly. However, if I scroll down the page, the mobile menu fails to slide into view (I have to scroll back up to see it).
I've experimented with various solutions like setting overflow-y to scroll, but nothing seems to work! Do you recommend using JavaScript?
Here's the HTML/PHP code snippet:
<nav class="navbar navbar-fixed-top navbar-light">
<div class="container">
<a class="navbar-brand" href="#">
<img src="<?php bloginfo('template_directory');?>/img/fullLogo.png" class="fluid-img pull-md-left" id="navLogo">
</a>
<div class="hidden-sm-down">
<?php
$mobileMenu = array(
'sort_column' => 'menu_order',
'container' => false,
'theme_location' => 'mobile_menu',
'menu_class' => 'desktop-nav',
'container_id' => 'desktopNavContainer',
);
wp_nav_menu( $mobileMenu );
?>
</div>
<a>
<button type="button" id="hamburger" class="pull-right hidden-md-up">
☰
</button>
</a>
</div>
</nav>
<div id="mobileMenu">
<button type="button" id="mobileMenuCloseButton" class="pull-right">
˟
</button>
<div id="mobileNavWrapper">
<?php
$mobileMenu = array(
'sort_column' => 'menu_order',
'container' => false,
'theme_location' => 'mobile_menu',
'menu_class' => 'mobile-menu',
'container_id' => 'mobileNavContainer',
);
wp_nav_menu( $mobileMenu );
?>
</div>
</div>
The CSS styling for navigation components:
/******** NAVIGATION ************/
#mobileMenu{
display: none;
position: relative;
z-index: 10000;
top: 0;
background-color: rgba(0,0,0,.95);
width: 100%;
font-size: 3em;
text-align: center;
overflow-y: scroll;
}
#mobileNavWrapper{
margin-bottom: 70%;
}
#mobileMenuCloseButton{
font-size: 2em;
color: white;
position: absolute;
top: -25px;
right: 9%;
}
Lastly, let's take a look at the JS implementation:
/* ----------- MOBILE MENU APPEAR --------------- */
$('#hamburger').click(function(){
console.log('got it');
$('#mobileMenu').slideDown(400);
});
$(window).scroll(function(){
if ($(window).scrollTop() > 600){
$('#mobileNav').addClass('menuScrolled');
} else{
$('#mobileNav').removeClass('menuScrolled');
}
});