mardi 28 juin 2016

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: http://ift.tt/291skxH

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>



via Chebli Mohamed

Aucun commentaire:

Enregistrer un commentaire