- This topic has 5 replies, 2 voices, and was last updated 4 years, 1 month ago by
.
-
Posts
-
Hi
I was wondering whether it is possible to expand the mobile navigation menu always to the current child page entry. At the moment when you are on a child page and you click on the hamburger symbol, the mobile navigation menu is opened and only the parent entries are displayed. I like to have the menu already expanded to the current child item after clicking on the hamburger symbol.
I hope you can understand what I mean? Thank you for your help!
Lead Developer
Hi there,
Give this CSS a shot:
.main-navigation.toggled .main-nav ul .current-menu-item ul, .main-navigation.toggled .main-nav ul .current-menu-ancestor ul { position: relative; top: 0; left: auto!important; right: auto!important; width: 100%; pointer-events: auto; height: auto; opacity: 1; display: block; visibility: visible; }Let me know 🙂
Thank you very much for your help! It’s really nice to see how fast we get advice here when we need one 🙂
So far it does work halfway. Meaning: After clicking on the hamburger symbol the navigation is now expanded to the current page as wished. But the parent of the current page can’t be collapsed on click on the arrow and if any of the sibling pages has got child pages, the navigation will fully expand them too. Do you have any idea how I could solve this? Thank you!
Ah, something like that would require javascript?
Is your site already using jQuery? If so, this might help: https://generatepress.com/forums/topic/expand-submenu-on-mobile-while-on-subpage/#post-350727
Hi Tom
Thank you for the link! That was exactly the same request as I had.
(Sorry, since English isn’t my mother tongue, I had some issues to explain that in a comprehensable manner).
However the solution of the linked post doesn’t work exactly as I wished for me. Therefore I changed the script a bit:<script> jQuery( document ).ready( function($) { if ( $( '.menu-toggle' ).is( ':visible' ) ) { //Expand two parent levels of current item $( "li.current_page_item" ).parent().addClass( 'toggled-on' ); //ul $( "li.current_page_item" ).parent().parent().addClass( 'sfHover' ); //li $( "li.current_page_item" ).parent().parent().parent().addClass( 'toggled-on' ); //ul $( "li.current_page_item" ).parent().parent().parent().parent().addClass( 'sfHover' ); //li //Show direct children of current item $( "li.current_page_item > .sub-menu").addClass( 'toggled-on' ); $( "li.current_page_item > .sub-menu").parent().addClass( 'sfHover' ); } } ); </script>It’s working now just perfectly. But since my javascript skills are a bit rusty, I’m asking me if this solution is acceptable in terms of performance and possible pitfalls?
Looks good to me! 🙂
- You must be logged in to reply to this topic.