[Resolved] Close menu on mobile after clicking

Home Forums Support Close menu on mobile after clicking

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #265355
    Karim

    Hello again Tom,

    I am building a one-page site and i want my menu to close after clicking, cause that just works best with one-page site.

    I found your topic where you refer to this link: https://gist.github.com/generatepress/6e122667d28cabd23582

    It does close the menu as i need, but it causes one other issue.
    I had to some adjustments with the menu-anchors in the Elementor Pro builder, cause it scrolled too low. So i had to place the menu-anchors with CSS about 60px higher.
    All works well and looks good, also on mobile.

    But when i insert your php script in my wp_footer hook, it seems it overrides my css, thus no longer scroll to the correct spot on page.

    Maybe possible to just use the piece of script that closes my menu, but remove the script that does the scroll part? I have absolutely zero knowledge about Php scripts, but i saw in your titel on the github page, that it is for closing menu and smooth scroll to ID. Maybe the last part is causing my issue?

    Hope you can help me out.

    Thanks in advance:)

    Karim

    #265481
    Tom
    Lead Developer
    Lead Developer

    Hi Karim,

    Give this a shot:

    jQuery( document ).ready( function( $ ) {
          $( document ).on( 'click', '.main-nav li > a:first-child', function( e ) {
    		var mobile = $( '.menu-toggle' );
    		if ( mobile.is( ':visible' ) ) {
    			$( '.menu-toggle').closest( '.main-navigation' ).removeClass( 'toggled' );
    			$( '.menu-toggle').closest( '.main-navigation' ).attr( 'aria-expanded', $( '.menu-toggle').closest( '.main-navigation' ).attr( 'aria-expanded' ) === 'true' ? 'false' : 'true' );
    			$( '.menu-toggle').removeClass( 'toggled' );
    			$( '.menu-toggle').children( 'i' ).addClass( 'fa-bars' ).removeClass( 'fa-close' );
    			$( '.menu-toggle').attr( 'aria-expanded', $( this ).attr( 'aria-expanded' ) === 'false' ? 'true' : 'false' );
    		}
        });
    });

    If I seem to remember, doing this kind of hijacks the click element so smooth scrolling plugins won’t work, which is why I added my own.

    Give it a try and let me know 🙂

    #265538
    Karim

    Hello Captain,

    Thanks for the great effort. I placed the code in the wp_footer hook, but it didn’t do anything. It also shows the code below my footer from the front-end. ht.primemedia.nl

    I was wondering: The original script you have, is there also extra margin added, which is needed with a sticky nav, so that the anchor link is not shown behind the nav bar. Cause if that is the case, i should just undo all the extra margins and use your script.

    If you have any other idea you are more then welcome:)

    Appreciate all your hard work sir.

    #265643
    Tom
    Lead Developer
    Lead Developer

    Yea, that original script takes the height of the navigation into account and should fix the issue of your content hiding behind the sticky nav.

    Let me know 🙂

    #265670
    Karim

    What was i thinking?! lol 😛
    It worked sweetly and everything works so well. Man man, just amazing to work with you guys. Really everything is possible cause the awesome tools and support.

    Cheers!:)

    #265681
    Tom
    Lead Developer
    Lead Developer
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.