Responsive mobile dropdown navigation using css only

Kim T
Kim T
Jun 16, 2014 · 3 min read

When building a fully responsive site the layout should adapt to different screen sizes, from mobile to tablet and desktop. Navigations are usually complicated as the space is limited, and functionality can differ between mobile and desktop.
Here we will look at a css only solution to a responsive dropdown navigation!
Updated 12/12/15: added css icon with transition animation, and using input checkbox for toggling

One common layout for a desktop navigation is to have fixed horizontal items, and then on mobile to have a drop-down using a menu (hotdog/hamburger) icon. Most examples use JavaScript to achieve this, but there is a way using css.

First you will need to create a list containing the main navigation items. Then add an checkbox input/label element. This will become our main navigation button using a span as the ☰ menu icon

<header class="header">
<a href="/" class="logo">AGT</a>
<input class="menu-btn" type="checkbox" id="menu-btn" />
<label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>
<ul class="menu">
<li><a href="#work">Our Work</a></li>
<li><a href="#about">About</a></li>
<li><a href="#careers">Careers</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</header>

We then need to add css to fix the header to the top of the page, reset list styling and hide the dropdown menu as the default state:

.header {
background-color: #fff;
box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1);
position: fixed;
width: 100%;
z-index: 3;
}

.header ul {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
background-color: #fff;
}

.header li a {
display: block;
padding: 20px 20px;
border-right: 1px solid #f4f4f4;
text-decoration: none;
}

.header li a:hover {
background-color: #f4f4f4;
}

.header .logo {
display: block;
float: left;
font-size: 2em;
padding: 10px 20px;
text-decoration: none;
}

.header .menu {
clear: both;
max-height: 0;
transition: max-height .2s ease-out;
}

Next we need to style the menu icon for the dropdown. I’ve decided to use span elements to create the icon, rather than an svg of icons font. Using css here allows us to have a fancy animation whenever some clicks the icon:

.header .menu-icon {
cursor: pointer;
display: inline-block;
float: right;
padding: 28px 20px;
position: relative;
user-select: none;
}

.header .menu-icon .navicon {
background: #333;
display: block;
height: 2px;
position: relative;
transition: background .2s ease-out;
width: 18px;
}

.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
background: #333;
content: '';
display: block;
height: 100%;
position: absolute;
transition: all .2s ease-out;
width: 100%;
}

.header .menu-icon .navicon:before {
top: 5px;
}

.header .menu-icon .navicon:after {
top: -5px;
}

Now we can add the icon and menu animations when the checkbox is clicked:

.header .menu-btn {
display: none;
}

.header .menu-btn:checked ~ .menu {
max-height: 240px;
}

.header .menu-btn:checked ~ .menu-icon .navicon {
background: transparent;
}

.header .menu-btn:checked ~ .menu-icon .navicon:before {
transform: rotate(-45deg);
}

.header .menu-btn:checked ~ .menu-icon .navicon:after {
transform: rotate(45deg);
}

.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
top: 0;
}

Lastly we need to add responsive css to show the horizontal menu items for larger browser widths by default:

@media (min-width: 48em) {
.header li {
float: left;
}
.header li a {
padding: 20px 30px;
}
.header .menu {
clear: none;
float: right;
max-height: none;
}
.header .menu-icon {
display: none;
}
}

And that’s it, a responsive dropdown navigation with nice animations/icons, using css only.

Previous versions:
http://jsfiddle.net/kmturley/88HRF/

Previous example using a right-aligned mobile icon:
http://jsfiddle.net/kmturley/04L0dkcj/10/

Creative Technology Concepts & Code

find, learn, share

Kim T

Written by

Kim T

Creative Technologist, coder, music producer, and bike fanatic. I find creative uses for technology.

Creative Technology Concepts & Code

find, learn, share

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade