πŸŽ‰ Happy 4th of July! Get 15% off GP Premium with the discount code: 4THOFJULY2020

[Resolved] Expand submenu on mobile while on subpage

Home Forums Support Expand submenu on mobile while on subpage

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #346894
    Petr

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

    GeneratePress 1.3.48
    GP Premium 1.3.1
    #347012
    Leo
    Staff
    Customer Support

    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.

    #347048
    Petr

    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

    #347055
    Leo
    Staff
    Customer Support

    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;
        }
    }
    #348951
    Petr

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

    #349038
    Leo
    Staff
    Customer Support

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

    #349084
    Petr

    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?

    #349223
    Tom
    Lead Developer
    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?

    #350570
    Petr

    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

    #350705
    Tom
    Lead Developer
    Lead Developer

    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>
    #350727
    Petr

    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!

    #350728
    Tom
    Lead Developer
    Lead Developer

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

    #753018
    NKT-IKBU

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

    #753321
    Tom
    Lead Developer
    Lead Developer

    That code should work for all levels inside the main navigation πŸ™‚

Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.