Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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

Examples:

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.

share|improve this question
add comment

2 Answers

up vote 8 down vote accepted

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.

share|improve this answer
    
Is there any tool you used to find that (other than photoshop?) –  Mervin Johnsingh May 15 '13 at 8:21
1  
If you use Chrome : chrome.google.com/webstore/detail/page-ruler/… –  Gildas Frémont May 15 '13 at 8:25
    
Neat, thanks ! Was looking for something like this. –  Mervin Johnsingh May 15 '13 at 8:34
1  
@mervin For Firefox it is part of addons.mozilla.org/en-US/firefox/addon/web-developer/?src=ss –  janw May 15 '13 at 9:55
    
@janw, thanks I dont use firefox but thats helpful to know –  Mervin Johnsingh May 15 '13 at 10:27
add comment

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.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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