CODEWITHSUNDEEP
javascriptjquerywordpress
Redtail
Redtail

Reputation: 47

Responsive menu not closing on item selection

EDIT: I'm not trying to be pushy but if someone knows how to help me with this, I'd really appreciate it.

www.kwpei.com is the site I'm working on, the issue I'm having is with the responsive menu not closing after a menu or submenu item is chosen. Ive been told the place to make the change needed is in global.js which I've included here in its current state. Could someone show me how to fix the issue?

jQuery(function( $ ){

$('.site-header').addClass('front-page-header');

$('.footer-widgets').prop('id', 'footer-widgets');

$(".nav-primary .genesis-nav-menu, .nav-secondary .genesis-nav-menu").addClass("responsive-menu").before('<div class="responsive-menu-icon"></div>');

$(".responsive-menu-icon").click(function(){
    $(this).next(".nav-primary .genesis-nav-menu, .nav-secondary .genesis-nav-menu").slideToggle();
});

$(window).resize(function(){
    if(window.innerWidth > 800) {
        $(".nav-primary .genesis-nav-menu, .nav-secondary .genesis-nav-menu, nav .sub-menu").removeAttr("style");
        $(".responsive-menu > .menu-item").removeClass("menu-open");
    }
});

$(".responsive-menu > .menu-item").click(function(event){
    if (event.target !== this)
    return;
        $(this).find(".sub-menu:first").slideToggle(function() {
        $(this).parent().toggleClass("menu-open");
    });
});

// Local Scroll Speed
$.localScroll({
    duration: 750
});

// Sticky Navigation
var headerHeight = $('.site-header').innerHeight();
var beforeheaderHeight = $('.before-header').outerHeight();
var abovenavHeight = headerHeight + beforeheaderHeight - 1;

$(window).scroll(function(){

    if ($(document).scrollTop() > abovenavHeight){

        $('.nav-primary').addClass('fixed');

    } else {

        $('.nav-primary').removeClass('fixed');

    }

});

});

Upvotes: 0

Views: 150

Answers (1)

Wim Mertens
Wim Mertens

Reputation: 1790

You can slide up the menu again on clicking any of the menu items. Try adding this bit of jquery:

$('.menu-item a').click(function () {
    $('.responsive-menu').stop(true, true).slideUp();
});

EDIT:

$('.menu-item a').click(function () {
if ($(window).width() < 800) {
    $('.sub-menu').stop(true, true).slideUp();
    $('.responsive-menu').stop(true, true).slideUp();
    $('.menu-item').removeClass('menu-open');
    }
});

If 800px is your breakpoint in the media query

Upvotes: 1

Related Questions