Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Gavin Mace
Gavin Mace
30,747 Points

Responsive Nav w/ Dropdown Items

Hey guys,

Can anyone recommend a good place to learn how responsive navigation menus work when you have dropdown items also?

I've looked at how to do both by themselves, but can't find tutorials to explain how to do both together and I don't really understand the theory.

The nav that I'm working on only takes up 50% width on the right of my header container (with the site logo on the left of the page). I'd like it to collapse into a hamburger nav on devices <769px, with the nav then having options for sub-items.

Can anyone explain it to me in plain terms, or reference an article that could help me?

Ideally CSS only, I haven't learned Javascript yet.

1 Answer

Iain Simmons
MOD
Iain Simmons
Treehouse Moderator 32,305 Points
Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

I'd start with your 'mobile' layout, which would probably just be a single column of the items stacked on top of each other. Should be fairly straight forward. If you want to avoid JavaScript, then your 'hamburger menu' button would probably be a label for a hidden checkbox input, and you'd use adjacent sibling selectors to show and hide the menu itself. Or follow something like what is presented in this tutorial: Create an Absolute Basic Mobile CSS Responsive Navigation Menu.

Then treat your 'desktop' layout as an almost completely separate thing, with different styles all nested within a media query so they only apply above a certain screen width. You could follow another tutorial for a dropdown menu like this one: How to Create a Simple CSS Dropdown Menu.

You might also find courses like Responsive Layouts and CSS- Beyond the Basics useful too.