Premium support

Please log in to post in these forums. If you didn't create an account when you purchased, please contact us.

Free support

If you haven't purchased GP Premium, support for the free theme can be found on

[Resolved] Expand submenu on mobile while on subpage

Home Forums Support Expand submenu on mobile while on subpage

This topic contains 11 replies, has 3 voices, and was last updated by  Tom 9 months, 1 week ago.

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
  • #346894


    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.

    GeneratePress 1.3.48
    GP Premium 1.3.1


    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.

    Want to help support GP? Please consider leaving us a review!


    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;

    Want to help support GP? Please consider leaving us a review!


    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 πŸ™‚

    Want to help support GP? Please consider leaving us a review!


    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?


    Lead Developer

    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


    Lead Developer

    Hmm ok. Javascript would be the answer then.

    Maybe something like this in your wp_footer hook:

        jQuery( document ).ready( function($) {
            if ( $( '.menu-toggle' ).is( ':visible' ) ) {
                $( '.main-navigation .current-menu-item' ).addClass( 'sfHover' );
        } );

    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:

        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' );
        } );

    Thanks for good work!


    Lead Developer

    Beautiful, thanks for sharing the complete code! πŸ™‚

Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.