Expand submenu on mobile while on subpage

Hi 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.

Hi 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

Try 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;
    }
}

Thanks a lot, that worked fine.
Any plans on adding this feature to customizer?

No 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 :)

Oh, 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?

The 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?

No, 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

Hmm 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>

Excellent, 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!

Beautiful, thanks for sharing the complete code! :)

Great solution Petr. Anyone have any ideas about how I might get it working on a second level dropdown menu inside of that?

That code should work for all levels inside the main navigation :)