Make the menu collapse into a hamburger menu?

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!

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