Close Mobile Menu On Link Click

  • Resolved acephalia

    (@acephalia)


    5 years, 7 months ago

    Hello

    I am trying to get the storefront mobile navmenu to collapse/hide once a menu item has been clicked. This is because I’m using an ajax page load and the menu stays open even after the new page is fetched via the ajax call and loaded.

    Would there be any way to toggle the menu back to the close state automatically after a menu link has been clicked?

    Many thanks

Viewing 1 replies (of 1 total)
  • Mike M. a11n

    (@mikedmoore)

    Automattic Happiness Engineer

    Hi there,

    Would there be any way to toggle the menu back to the close state automatically after a menu link has been clicked?

    This could achieved with some JavaScript or jQuery. The mobile menu is normally expanded menu the menu button is clicked. When the button is clicked, there is a class added to the nav element. That class is .toggled. When that class is added, the following CSS takes over: 

    
.main-navigation.toggled .handheld-navigation, .main-navigation.toggled .menu > ul:not(.nav-menu), .main-navigation.toggled ul[aria-expanded="true"] {
	max-height: 9999px;
}

    Basically, the CSS applies a max-height: 9999px rule to the menu. So, with JavaScript or jQuery, you have a couple options:

    1. Remove the .toggled class from the nav.main-navigation element
    2. Add the max-height: 9999px directly to the element using JavaScript or jQuery.

    The first option would be recommend as the second one would require some further consideration when the menu needs to opened again.

Viewing 1 replies (of 1 total)
  • The topic ‘Close Mobile Menu On Link Click’ is closed to new replies.