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 Build a Responsive Navigation with Flexbox

Make the menu collapse into a hamburger menu?

I enjoyed the video taught me a lot. Can anyone suggest a way to learn to make the menu collapse into a hamburger menu?

Pascal Breitrück
Pascal Breitrück
Courses Plus Student 3,206 Points

Hey friend , there are many ways to do this . (Pure CSS , JS etc....) Codepen: https://codepen.io/mutedblues/pen/MmPNPGc example in PURE CSS

Or use an Framework like Bootstrap or Foundation. ;D

Search on Codepen Hamburger menu and you get many code to read and learn .

Greets Pascal

3 Answers

Jamie Reardon
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Jamie Reardon
Treehouse Project Reviewer

Hi there, to make the menu collapse into a hamburger menu with the code from the tutorial, you could do this a few ways but I will just tell you one way now.

There is one ul element that holds the navigation that has the class nav. What you could do at the smaller screen-sizes, is target this element in CSS and make it invisible, to begin with:

.nav {
  display: none;
}

Next, in the HTML you could add a new ul element that will be used for the mobile navigation and give it a class, something like this:

<ul class="nav-mobile">
  <!-- Insert links here -->
</ul>

At a larger breakpoint, you could target the mobile navigation and have it hide from that viewport size and onwards. And have the original (desktop) nav display on screen:

.nav-mobile {
  display: none;
}

.nav {
  display: block; /* or inline-block depending on your layout. */
}

For the styling of the mobile navigation, e.g. the hamburger icon itself and the toggle function for displaying the nav links, you could use bootstrap and have a search around google. You could even check out a project I recently finished that has implemented this: http://hsolutions.uk I used this exact approach for styling the navigation.

@Jamie Reardon, That is great, thank you. I really like your work on http://hsolutions.uk, and use of this!

@Jamie Reardon, Will this work if you leave bootstrap out?

Jamie Reardon
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Jamie Reardon
Treehouse Project Reviewer

In this particular case, the answer is no it wouldn't work. This is because I have used bootstrap classes to my html navigation elements and it also co-operates with the javascript scripts that I included to the page that was also included with bootstrap.

You can make this work all alone with your own custom code, however I think for the simplicity and time you would be better off using bootstrap.

@Pascal Breitrück, thanks for the reply, however when I go to the pen it not there. :(... :)