/    Sign up×
Community /Pin to ProfileBookmark

Help with responsive menu bar design, please

Copy linkTweet thisAlerts:
Jan 07.2018

I’ve managed to get the menu bar the way I want it when the screen width is 840 pixels or more.
Using a media query, when the screen is at least 560 pixels (and up to 839 pixels), I hide the text for the menu items (but leave the icons displayed). But I also want to add in a hamburger menu icon and have it display a vertical menu (so that, if the icons aren’t clear to visitors, they can just navigate via the hamburger menu).

If the screen is less than 560 pixels, I want to display only the hamburger menu, a home icon, and the search box.

I’m pretty new to responsive design and it [I]feels like[/I] I need to have two completely different menus – but that would mean a lot of redundant code so I’m thinking that’s not right. The reason I say it [I]feels [/I]that way is because if I nest all the menu items (as shown when the page is viewed at 840px wide or more) vertically under the hamburger menu, then, if my media query hides the hamburger menu above 560px, won’t the rest of the menu items be hidden, too?

The page I’m working on is [URL=”http://techgeniusmobile.com/mts.html”]here[/URL]. Thanks for your time and consideration!

to post a comment
CSS

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@SempervivumJan 07.2018 — Providing an additional hamburger menu at medium screen size is a bit unusual. What about adding tooltips to the icon menu?

However, if you prefer this procedure you might clone the HTML by Javascript/jQuery so that you need not create and maintain two menus in parallel.

Edit: It came to my mind that the medium screen size might apply to a touch device too. Then tooltips wouldn't be a proper solution.
Copy linkTweet thisAlerts:
@Donny_BahamaauthorJan 07.2018 — It came to my mind that the medium screen size might apply to a touch device too. Then tooltips wouldn't be a proper solution.[/QUOTE]That's exactly why I did it that way.

My main issue is more basic than the extra hamburger menu on the medium screen, though. I don't understand how to show all the menu items on the navbar while hiding the hamburger menu (at full width) - then show the hamburger menu (at small width) with the menu items hidden - but display them vertically below the nav bar when the HB menu is clicked or hovered. More precisely, I don't know how to do that without writing two separate nav menus - which not only seems inefficient, but maybe also detrimental to search engine crawling/ranking.
Copy linkTweet thisAlerts:
@SempervivumJan 07.2018 —  how to show all the menu items on the navbar while hiding the hamburger menu (at full width) - then show the hamburger menu (at small width) with the menu items hidden - but display them vertically below the nav bar when the HB menu is clicked or hovered.[/QUOTE]
This can be done by a few lines of CSS and HTML and by use of the checkbox hack:

... aaargg, the forum refused my posting. View the code at pastebin:

https://pastebin.com/i747B6SA

This is just a rough draft demonstrating the general procedure. You will need to extend it to your three level media queries.
×

Success!

Help @Donny_Bahama spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.2,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,
)...