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.

Leave a Reply