CODEWITHSUNDEEP
wordpressmobilemenu
Maarten Nauw
Maarten Nauw

Reputation: 1

Close Mobile Menu on Item click (elementor kit, wordpress)

I just can't seem to find the answer for this. I have tried some of the answers on this forum but it doesn't work. If I'm on mobile view and click on a menu item which has a "#" as link. The menu does not close. This is the site I am trying it on. I hope some one knows the problem. www.cfxsquad.nl/verge/

Upvotes: 0

Views: 3979

Answers (4)

Jonathan
Jonathan

Reputation: 331

I had the same issue when I created anchor links on my page. I solved it with a JavaScript that clicks the "X" close button of the menu. Add the following JavaScript to the footer of your page:

document.addEventListener('DOMContentLoaded', function() {
    var menuCloseButton = document.querySelector('.elementskit-menu-close');
    var menuLinks = document.querySelectorAll('.elementskit-menu-container a[href*="#"]');

    menuLinks.forEach(function(link) {
        link.addEventListener('click', function() {
            if (menuCloseButton) {
                menuCloseButton.click(); // Simula um clique no botão de fechar para fechar o menu
            }
        });
    });
});

Upvotes: 1

Jonathan
Jonathan

Reputation: 331

Sure, here is the translation of the message:

I had the same issue when I created anchor links on my page. I solved it with a JavaScript that clicks the "X" close button of the menu. Add the following JavaScript to the footer of your page:

<script>
// close mobile menu on anchor click
document.addEventListener('DOMContentLoaded', function() {
    var menuCloseButton = document.querySelector('.elementskit-menu-close');
    var menuLinks = document.querySelectorAll('.elementskit-menu-container a[href*="#"]');

    menuLinks.forEach(function(link) {
        link.addEventListener('click', function() {
            if (menuCloseButton) {
                menuCloseButton.click(); // Simula um clique no botão de fechar para fechar o menu
            }
        });
    });
});
</script>

Upvotes: 1

anatolhiman
anatolhiman

Reputation: 1859

The mobile menu will automatically disappear when you get your links working – clicking the links will reload the page and the menu will be gone until the next time you click the open icon.

If you want a fancier animated retreat of the menu, you can try a javascript click handler of type mainMenu.addEventListener('click', closeMenu(e)) targeting either the whole menu area or each individual link item.

Then you attach that handler to the toggle menu javascript that already exists (I wasn't able to find the actual code in your site, the structure is hard to grasp and I only found a twentyseventeen theme). You can do that by replacing closeMenu(e) with the name of the function that toggles the menu from the hamburger menu. Make sure that you load your new JS after the theme's original script.

If you can't use the original toggle animation you have to first create a css animation, then add that css class to the #main-menu element dynamically with javascript when the menu/links are clicked. Imagining you have already declared your mainMenu variable above, and created the animate-close css class in your stylesheed (and that the css-class that keeps the menu open is called open:

    const closeMenu(e) => {

      // e.preventDefault() -- only if you don't want the 
      // link clicks to work/send you along to the next page

      // Now close that darn menu:
      if (mainMenu.classList.contains('open') {
        mainMenu.classList.add('animate-close')
        mainMenu.classList.remove('open')
      }
    }

Upvotes: 0

anatolhiman
anatolhiman

Reputation: 1859

The question is not detailed enough to understand exactly which item in the menu that doesn't work and what you want to achieve, but I assume it is the CASES link that causes a problem. It doesn't include `href="..." at all, so that's why it isn't responding to clicks.

The others below it include <a href="#" ... correctly. To get this to work you should include a href="#" and then change the # to a regular url in the wordpress format:

<a href="<?php bloginfo('url'); ?>/link-to-the-page">CASES</a>

Upvotes: 0

Related Questions