Storefront Handheld Menu Height

Feb 17, 2017

—

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.

Comments

11 responses to “Storefront Handheld Menu Height”

Fay Designs Jewellery

August 10, 2017

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 🙂

Reply
1. mikey
  
  August 10, 2017
  
  I’m pretty sure the code would not be related at all – but if you remove it, does it start working again?
  
  Reply
  1. wajeeh
    
    March 6, 2018
    
    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
    
    Reply
2. Moritz Hartges
  
  December 19, 2017
  
  I added following CSS, which solved my problem with handheld menu hight and toggle function
  .main-navigation.toggled .handheld-navigation { max-height: 5000px; }
  
  Reply
Bryan Tanjung

January 4, 2018

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

Reply
1. Mikey Arce
  
  January 4, 2018
  
  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.
  
  Reply
Bryan Tanjung

January 12, 2018

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 🙂

Reply
deddenijzerwaren

January 29, 2018

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?

Reply
1. mikey
  
  January 30, 2018
  
  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?
  
  Reply
Clay

February 8, 2018

My handheld menu button is a plain white box. Is there an easy way to change this? I have used the hamburger plugin but did not have any luck.

Reply
1. mikey
  
  February 11, 2018
  
  I would suggest checking in the Storefront Forums for help: wordpress.org/support/theme/storefront/
  
  Reply