- This topic has 5 replies, 2 voices, and was last updated 7 years, 3 months ago by
.
-
Posts
-
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
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 🙂
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.
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 🙂
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!:)
Great to hear 🙂
- You must be logged in to reply to this topic.