CODEWITHSUNDEEP
csswordpresstemplatesmenuhide
Pablo G.
Pablo G.

Reputation: 55

How to make disappear this menu on Wordpress when I click a link?

I have a question that I guess it's pretty simple, but I can't solve it by myself. I am designing a single-page site using WordPress and Pistis template.

The thing is that the menu is predefined as a burger menu, and when it's clicked, the whole page become gray and a big menu appears on the center. I'll post a picture, so you understand it better.

1

What I want to happen is, when you click on any menu element (link), the whole menu disappears, showing the website as it was before that anybody showed the menu clicking on the burger icon. As it is a single-page, it's not loading a different page when clicked, it's just moving to the proper part of the page. How can I do it if I can only add some CSS?

Upvotes: 0

Views: 783

Answers (1)

cabrerahector
cabrerahector

Reputation: 3948

Before we do anything, note that if your theme gets an update this change will be overwritten. It might be a good idea to create a child theme instead and do the changes there (although it seems that the original theme has already been modified quite a bit.)

With that out of the way, the file you need to edit to have the menu close automatically when clicking on any of the links is located here: /wp-content/themes/pistis/menu.js. This is the code that handles the menu:

//open/close primary navigation
$('.cd-primary-nav-trigger').on('click', function(){
    $('.cd-menu-icon').toggleClass('is-clicked'); 
    $('.cd-header').toggleClass('menu-is-open');

    //in firefox transitions break when parent overflow is changed, so we need to wait for the end of the trasition to give the body an overflow hidden
    if( $('.cd-primary-nav').hasClass('is-visible') ) {
        $('.cd-primary-nav').removeClass('is-visible').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',function(){
            $('body').removeClass('overflow-hidden');
        });
    } else {
        $('.cd-primary-nav').addClass('is-visible').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',function(){
            $('body').addClass('overflow-hidden');
        }); 
    }
});

$('.menu-item-2539 a').on('click', function(){
    $('.cd-menu-icon').toggleClass('is-clicked'); 
    $('.cd-header').toggleClass('menu-is-open');

    //in firefox transitions break when parent overflow is changed, so we need to wait for the end of the trasition to give the body an overflow hidden
    if( $('.cd-primary-nav').hasClass('is-visible') ) {
        $('.cd-primary-nav').removeClass('is-visible').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',function(){
            $('body').removeClass('overflow-hidden');
        });
    } else {
        $('.cd-primary-nav').addClass('is-visible').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',function(){
            $('body').addClass('overflow-hidden');
        }); 
    }
});

Change:

$('.menu-item-2539 a').on('click', function(){

into:

$('.menu-item a').on('click', function(){

and that should do it.

Remember to clear/hard-refresh your browser's cache so it picks up this change.

Upvotes: 1

Related Questions