• 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.