Is it a good practice to extract some menu items from the main navigation on medium sized screens?

Question

A designer I work with often creates a navigation for websites that looks like this on different screen sizes (mobile, tablet, desktop):

On small screen sizes (mobile):

• there's a burger menu holding all menu items

On medium screen sizes (tablet):

• there are some items that should be displayed as the main navigation
• there's also a burger menu that holds the remaining items

On large screen sizes (desktop):

• there's only the main navigation, no burger menu

---

Somehow I don't feel that the approach for medium screen sizes is very good. To me it suggests that there are no more main pages but only meta pages (like data privacy, imprint etc.) hidden in the burger menu. So the user might miss important things. It also leads to duplicate content in the HTML – but then again I'm more a programmer than a designer.

Can somebody elaborate whether this is a useful approach or not?

Answer 1

Hamburger menus aren't typically used as overflows for existing navigation - they're usually either used to contain the entire navigation (or sometimes to contain non-navigation actions).

I think how you are abbreviating the navigation options as the screen gets smaller is a good approach, but I agree with your concern that for the medium screen, the user might think that the displayed navigation items are the entirety of the (useful!) navigation available to them. One way you could get around this is by replacing the hamburger icon with the word "More" or similar (maybe in conjunction with some kind of dropdown menu to reveal the extra items), to make it explicit that there are more navigation options available.

Answer 2

Just to be clear - Hamburgers navigation menus are definitely not suitable for the web. this is strictly designed to be used on mobile apps since the screen size is too small to hold all menu items at once. Now, in your case, i would think about a way to horizontally design ALL items at once or simply change the menu structure to fit smaller screens (like moving it to the footer on smaller screens, etc.).