More and more websites are getting top menus that always stay when you scroll.


enter image description here

enter image description here

enter image description here

Personally I don't like them because, in my opinion, they take up too much space.

But how high should they be at maximum? I guess the number would differ from mobile, tablet and desktop.


Strictly talking about desktop navigation:

It is really going to depend on the content displayed but under ~970 px width and/or ~400 height do not use a sticky menu, the menu is going to eat the content. Be responsive in that matter.

Do not be afraid to go big, Facebook menu is about 90 px high and feels really natural. Did you realized that Gmail is in fact using a super Huge sticky menu of 160 px high?

Under 1045 px it is reduced to ~110 px

enter image description here

The question is: when and how the menu is going to be helpful to interact with the content? The size of it is going to be a consequence of that reflection.

Do not be scared to see big it is not an issue.


Welcome to the ever changing web.

The navigation should be as small as readability and legibility will allow, but large enough that you can touch the button safely in a mobile device.

Apple's got a good idea about the touch size, so based on the pixel dimensions for their app icons on various devices a safe bet would be between 57 pixels high and wide to 114 pixels high and wide. Anything larger than that and you're using more screen real estate than potentially necessary.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.