How/When do you switch main nav to burger menu icon?

[bernhard]

As you might have noticed I try to improve my frontend skills ? And now that I have RockFrontend I can invest on all those little details that are tedious to implement but always the same.

One of those things that has always annoyed me is switching the main navbar to the mobile menu toggle and vice versa. How do you do that?

I've always done that using breakpoints (simply using uk-hidden@m / uk-visible@m) or using custom breakpoints. The problem here is that the main menu might change due to user input. Or it might change in width due to changing the language.

The PW backend uses a JavaScript solution that shows the menu as long as there is enough space and shows the burger if not.

Is that a good solution for a real website? Any tips on how to best implement that? Would be using the ResizeObserver be sufficient?

Thx for your input ? 

[pwired]

I simply resize the website from wide screen to mobile screen .... and then observe at what screen size ... it looks both practically and visually good ... to change from default menu to hamburger menu. This is not so easy done with a fixed set of breakpoints in e.g. bootstrap. But this is very easy done with e.g. something like pocketgrid css where you are totally free to set any breakpoint at any screen size where you want a change to happen in the look and feel of the website.

[wbmnfktr]

I'd say the "How to do it" is your personal preference.
Using breakpoints, JavaScript a mix of both, whatever fit's your needs and tools.

 

The way more important part or question is or should be:

• Which parts of the navigation need to be visible at what point and at which position?

I say that because on a personal blog you can do whatever you want while noone really cares.
They know they are on a blog and they most likely will find what they are looking for.

On the other hand there are lots of patterns (already burned into the users brains) people look for.
A shop is totally different in terms of navigaton than a wiki.
A restaurant has totally different focus than an insurance company.

Look up all the big online shops. In terms of navigation, search inputs, browsing... they are almost exactly the same.
Either due to those patterns or because they all use the same framework/components (for example: Shopify).
Sure there are fancy ones but those only speak to a small audience that's looking for a specific item or experience and don't just browse to spend money.

Compare websites from big players and brands to your clients. People know clicking the top-left logo brings them back to the homepage, while the top-right ☰ means there is menu when clicking.

Each niche and type of website has it's very own patterns, behaviours and things people look for.

Maybe that's a better thing to focus on.

 

And don't forget to have fallbacks for those without javascript, using screen-readers or keyboard-driven navigation.
Accessibility is a huge part here. (I'm guilty on this one but I'm working on it.)