Storefront Handheld Menu Height

With Storefront you can have a separate menu for mobile and desktop. They are listed as Primary for the Desktop, and Handheld for Mobile:

If you are wondering, the Secondary Menu is for the Header.

The Handheld Menu is specific to mobile devices, and it looks like this:

One of the nice visual queues is that it uses an animation to “open up” the menu. Since animations require a height in order to work, it has to have a set “max-height” in CSS:

.handheld-navigation,.main-navigation.toggled .menu>ul:not(.nav-menu),.main-navigation.toggled ul[aria-expanded=true]

The problem then becomes, what if you have more menu items than that height can hold? In my tests it can hold up to about 30 items.

Honestly, if you have more than 8, it’s a bad idea.

However, if you want need to have more than 30ish, you can just use some custom CSS like this:

.handheld-navigation { max-height: 2000px !important; }

That should make the menu up to 2000px in height.

11 Replies to “Storefront Handheld Menu Height”

  1. Hi, I loved your code and it solved my handheld menu problem, but unfortunately has caused another problem. When I click on Menu to open the handheld menu it stays open and doesn’t close again when clicked (as it did before). But apart from that its a wonderful bit of code πŸ™‚

      1. Hi

        Seems storefront handheld menu is not accordion and we can’t click on menu and view sub menu.
        menu and sub menu show always.
        How can i change this and when click on menu can see seub menu and when click on another menu close previous sub menu and open new sub menu

        Thank you

  2. Hi! do you know how to change the minimum width required to start the hanheld version of storefront? I want my website is able to change into handheld version when its below 768px in width

    1. Hey Bryan,
      From what I can see it already does this for anything below 768.

      If you want to change it, what you can do is change the Sass included and then compile it into CSS. The Sass uses these variables:

      As you can see right now Desktop is set to 768, and the `$handheld` variable doesn’t seem to be used anywhere, so anything below desktop would be handheld.

  3. Hi Mikey, I think this a little bit unrelated with the topic but do you know how to turn off that hamburger menu in handheld view? Thanks in advance πŸ™‚

  4. Hey Mikey, i love the Storefront theme, however ive stumbled upon a problem with the handheld menu. Is it possible to collapse all the second and third levels of the menu automatically so that the first level is only visible?

    1. Hey there! Is there a reason you would have these levels if they aren’t being displayed? Why not just create a separate menu to be used in handheld mode?

Leave a Reply