Elementor Question posted in
A comprehensive tutorial library can be found here.

Elementor – 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/

Tags:

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    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')
      }
    }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search