What We’ll be Making
Creating the Structure
Structuring the HTML
Our HTML will be structured in 2 main containers, a
nav element that contains our menu and a
header element that contains some preview content.
We’re using an unordered list for our navigation links, contained in a
nav element with the class of “wrapper”. Our entire menu system is in-turn wrapped in a
nav element with the class of “navBar”. We’ll target these classes with CSS to adjust our layout.
We’ll use a basic
div with a class of “logo” to act as placeholder for a logo.
A simple header with a heading and some filler text will give our page some content to preview.
Basic CSS Styling
We’ll add some basic styling to our snippet with CSS. I’m using Sass for this example, but you could just as easily use plain ol’ CSS. We’ll give our
h1 some extra top-padding so that it displays below our navigation.
Our content is centered by giving the
.wrapper class the property
margin: 0 auto. We limit its width by giving it the property
We ensure that the navigation stays at the top of the browser window by giving it a
position: fixed property. Setting its width to
min-width: 100% will ensure that the navigation spans the full width of the browser window.
Lastly, we’ll give our logo placeholder some definition by giving it a
We’ll focus on styling the navigation for our full, desktop version first and then implement our mobile toggle afterward.
We’ll target our navigation wrapper by nesting the selector
.wrapper within the
nav element. This allows us to specifically target the wrapper when it is a child of a
nav element. We give this class the
display: flex property to make it a flex container. We can vertically center the child elements (navigation links and logo) by giving the parent container the flex property
align-items: center. Lastly, giving the parent container the flex property
justify-content: space-between evenly distributes the child elements within the parent flex container, effectively floating our logo to the left and our menu items to the right.
Next we’ll target our navigation links by nesting them within our
nav element. In the same manner that we set our
nav .wrapper to display as a flex container, we can set give the
display: flex and
justify-content: space-between properties to control the spacing between our list items. Traditionally, we might achieve spacing between list items using right and left padding. The flexbox model allows the spacing between these items to be intelligently adjusted.
We set our list items to
display: inline-block so that they don’t stack. We’ll also add a bit of transitioning to our anchors for a bit of visual interest.
Adding the Menu Toggle
Setting Up the Input/Label
We’ll place our
input menu as a sibling to our logo
div and navigation
ul. Our mobile menu will use a checkbox type
input, which we’ll give an id of “menu-toggle”. We’ll also give the
input a label with a class of “label-toggle”.
In our CSS we’ll set both elements to
Adding a Media Query and Toggled States
We’ll set our media query to target screen widths at or below 768px by nesting the following code within
@media screen and (max-width: 768px). We’ll switch our
display: block so that our list items will stack vertically. We set
transition: all for the
ul because we’ll be transitioning the
visibility properties when toggling.
display property isn’t effected by
transition, we’ll need to transition our menu using a combination of
height: 0, and
opacity: 0. In our toggled state, dictated by
#menu-toggle:checked, we’ll set the transitioned properties to the following:
Now when toggling our menu, the menu container will expand and transition nicely. This menu, built on CSS alone, serves as a responsive way to serve navigation. You can also remove the desktop state to have a full-screen toggle menu at any screen width.
The Finished Result
Below you’ll see the finished result, which you can fork on Codepen. Note that in order to see the responsive aspects of the menu, you’ll need to run this snippet in debug mode to access the media query breakpoint.