adjust auto-opening of responsive-nav.js with sticky nav menu on mobile
-
I’m developing a WordPress site that uses the Responsive Nav jquery plugin for the mobile menu. I’m also using a jquery script to create a sticky nav menu.
I’m building off the Bones starter theme.
The issue is when the dropdown menu is open on mobile, it blocks the whole screen because of the sticky nav script.
I’m wondering if there’s a way to adjust this so that the menu is only sticky on mobile when it’s closed?
Here’s a link to the test site: https://www.test.truetolifetraining.com/
Here’s my script for the sticky nav. This was added to my scripts.js file that loads in the theme footer.
$(document).ready(function() { var stickyNavTop = $('.nav').offset().top; var stickyNav = function(){ var scrollTop = $(window).scrollTop(); if (scrollTop > stickyNavTop) { $('ul#menu-main-navigation').addClass('sticky'); } else { $('ul#menu-main-navigation').removeClass('sticky'); } }; stickyNav(); $(window).scroll(function() { stickyNav(); }); });
I put the responsive nav script in my library/js folder, then enqueued the script in my bones.php file. Here’s how I’m calling the responsive-nav plugin in my footer.php file:
<script> var nav = responsiveNav(".nav-collapse", { // Selector animate: true, // Boolean: Use CSS3 transitions, true or false transition: 284, // Integer: Speed of the transition, in milliseconds label: "Menu", // String: Label for the navigation toggle insert: "before", // String: Insert the toggle before or after the navigation customToggle: "", // Selector: Specify the ID of a custom toggle closeOnNavClick: false, // Boolean: Close the navigation when one of the links are clicked openPos: "relative", // String: Position of the opened nav, relative or static navClass: "nav-collapse", // String: Default CSS class. If changed, you need to edit the CSS too! navActiveClass: "js-nav-active", // String: Class that is added to element when nav is active jsClass: "js", // String: 'JS enabled' class which is added to element init: function(){}, // Function: Init callback open: function(){}, // Function: Open callback close: function(){} // Function: Close callback }); </script>
- The topic ‘adjust auto-opening of responsive-nav.js with sticky nav menu on mobile’ is closed to new replies.