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]
{max-height:1750px}

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.

10 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 🙂

  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:
      https://github.com/woocommerce/storefront/blob/master/assets/sass/utils/_variables.scss#L22-L25

      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