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