- This topic has 13 replies, 4 voices, and was last updated 5 years, 3 months ago by Tom.
-
AuthorPosts
-
July 10, 2017 at 4:27 am #346894Petr
Hello,
let me explain my problem by example:
I’m on the page Services > Webdesign. When I click on the mobile menu, I can see that the item “Services” is selected, but to see the whole submenu (including the page I’m on right now) I have to click on the arrow on the right and expand it manually.
It would be nice to have it expanded by default (both for the parent page and the child pages). Or at least to have the option to do so.
Is there a way, how to do it?
Thanks for your reply and excellent work.
PetrJuly 10, 2017 at 8:10 am #347012LeoStaffCustomer SupportHi there,
Would making a new menu specific for mobile with all items as parent menu items work for you?
This site is currently using the same idea ๐
Let us know.
July 10, 2017 at 8:47 am #347048PetrHi Leo,
well, this is kind of a last resort solution for me.
I don’t like the idea of maintaining two (actually same) menus, just for this case. And, in addition, I actually like to have the menu well structured on multiple levels.Transforming complex multilevel menu to a new one with 20 items on the same level, doesn’t work for me quite well.
I actually didn’t expect that it would be much of a problem, I was assuming that you have ready-made solution for this (as you do have for many other situations), which I just wasn’t able to find. I can’t imagine, that I am the first one requesting this feature, am I?
Thanks again
July 10, 2017 at 8:59 am #347055LeoStaffCustomer SupportTry this:
@media (max-width: 768px) { .main-navigation .main-nav .current-menu-item .sub-menu, .main-navigation .main-nav .current-menu-ancestor .sub-menu { opacity: 1 !important; display: block !important; left: auto; right: auto !important; position: relative; width: 100%; clear: both !important; top: auto; float: none; } .current-menu-item .dropdown-menu-toggle, .current-menu-ancestor .dropdown-menu-toggle { display: none; } }
July 13, 2017 at 10:59 am #348951PetrThanks a lot, that worked fine.
Any plans on adding this feature to customizer?July 13, 2017 at 12:01 pm #349038LeoStaffCustomer SupportNo problem!
Hmm not likely I don’t think as there has only been a couple people asking for this.
We will consider it for sure though ๐
July 13, 2017 at 2:14 pm #349084PetrOh, sorry to bother again… Now I realized, that with this code the active submenu lacks the ability to close and open again.
The arrow on the right side is missing and when I bring it back by not using the second part of your code, it does nothing.As I looked into the code now, I would need to have set the class “sfHover” on the parent menu, when the subpage is loaded. Am I right, and how can I achieve this?
July 14, 2017 at 12:18 am #349223TomLead DeveloperLead DeveloperThe above code will just always show the sub-menus – no open/close functionality.
Are you just wanting all of the sub-menus to be open by default?
July 17, 2017 at 4:54 am #350570PetrNo, I don’t need to open all the sub-menus. Just the one, where the sub-page I’m on is situated (see the example in the very beginning). And the menu should stay closable.
I think that I need to set the class โsfHoverโ on the parent of the sub-page when page is loaded. But I don’t know how.
Thanks a lot
July 17, 2017 at 9:56 am #350705TomLead DeveloperLead DeveloperHmm ok. Javascript would be the answer then.
Maybe something like this in your wp_footer hook:
<script> jQuery( document ).ready( function($) { if ( $( '.menu-toggle' ).is( ':visible' ) ) { $( '.main-navigation .current-menu-item' ).addClass( 'sfHover' ); } } ); </script>
July 17, 2017 at 10:22 am #350727PetrExcellent, this was the right direction.
I needed to add few more classes to few more places (sfHover only changed the rotation of the arrow, toggled-on actually did the main trick), but it works now.
The whole code I use is this:
<script> jQuery( document ).ready( function($) { if ( $( '.menu-toggle' ).is( ':visible' ) ) { $( '.main-navigation .current-menu-item' ).addClass( 'sfHover' ); $( '.main-navigation .current-menu-item .sub-menu' ).addClass( 'toggled-on' ); $( '.main-navigation .current-page-parent' ).addClass( 'sfHover' ); $( '.main-navigation .current-page-parent .sub-menu' ).addClass( 'toggled-on' ); } } ); </script>
Thanks for good work!
July 17, 2017 at 10:24 am #350728TomLead DeveloperLead DeveloperBeautiful, thanks for sharing the complete code! ๐
December 10, 2018 at 9:06 am #753018NKT-IKBUGreat solution Petr. Anyone have any ideas about how I might get it working on a second level dropdown menu inside of that?
December 10, 2018 at 4:37 pm #753321TomLead DeveloperLead DeveloperThat code should work for all levels inside the main navigation ๐
-
AuthorPosts
- You must be logged in to reply to this topic.