Collapse sub menu on mobile

  • Resolved lukhsa

    (@lukhsa)


    2 years, 1 month ago

    I can’t seem to find any option to collapse sub menus on mobile.

    My menu has 7 items, 4 of which have additional submenus.

    It works perfectly on wide screens, but on mobile once it collapses and turns into a hamburger the problem happens. Once you open a menu(hamburger) on mobile it opens all the submenus by default and you can’t even close them with your hand. So you get this long list that looks bad and unprofessional.

    I could probably close it with Jquery and some css, but don’t know where I would even enter Jquery in this theme.

    So are there any simpler solutions to this? Can I edit mobile menu via block editor somehow?

Viewing 5 replies - 1 through 5 (of 5 total)
  • Moderator Kathryn Presner

    (@zoonini)

    Hi @lukhsa – the Navigation block is designed to expand all submenu items in the mobile version, and there isn’t a built-in way to change that behaviour.

    You can see how @poena explained it in this GitHub issue:

    This is the intended behavior of the navigation block. I mean it is intentional that submenus are never collapsed in the overlay, regardless of the block settings.

    The reporter of that issue provided some custom CSS to just hide the sub-menu items. I made an adjustment and this appears to work on my test site:

    /* Hide submenu items on mobile menu */
.wp-block-navigation-item.open-on-hover-click .wp-block-navigation-submenu__toggle[aria-expanded="false"] ~ ul.wp-block-navigation__submenu-container {
    visibility: hidden;
}

    Of course this doesn’t allow the sub-menu items to expand on click, as I think that would also require some JavaScript, as you mentioned.

    While the Customizer is not exposed by default when using Site Editing, you can still access it manually by adding /wp-admin/customize.php after your URL. You can then add custom CSS in the Additional CSS area.

    One other workaround could be to look for a menu plugin that has the behaviour you’re looking for, as long as it’s compatible with block themes/Site Editing.

    Thread Starter lukhsa

    (@lukhsa)

    @zoonini Thanks for the answer!

    It’s weird that it is like that by default, since I rarely ever see a website with collapsed submenus, it just looks messy.

    I’ve fixed this pretty simple in the end.

    1. Enabled “open on click” on navigation in editor.
    2. Made java script file and registered it in functions.php (I am using my own copy of TT3 theme)
    3. Made simple JQuery that toggles all submenu’s on click.

    It can be done even better most likely, but it will work for now since I am in the rush!

    Moderator Kathryn Presner

    (@zoonini)

    @lukhsa I agree it would be a nice enhancement, and I’m really glad you got something working on your site!

    Would you be willing to put your code up on a Gist on GitHub – or some other place where others might also benefit from it, in case they’d like to do the same thing? (Or better yet, submit a PR for this issue?) ??

    • This reply was modified 2 years, 1 month ago by Kathryn Presner. Reason: fixed incorrect link
    Thread Starter lukhsa

    (@lukhsa)

    @zoonini I will put my code there as soon as I catch some free time, thanks for everything again!

    Moderator Kathryn Presner

    (@zoonini)

    That would be awesome, thank you! And you’re very welcome. ??

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Collapse sub menu on mobile’ is closed to new replies.