How to Create a Basic Responsive Navigation Bar

We are going to learn how to build a minimalist navigation bar using a combination of CSS and JavaScript.

Erica N
Erica N
Mar 26 · 4 min read

We are going to build a basic responsive navigation using a combination of CSS, flexbox and some small JavaScript. To see how the navigation works, you can visit the codepen of this navigation for a better view.

Let’s get started on building this simple navigation.

The Navigation Markup

Here is the markup for our navigation bar:

<nav>
<span class="nav-toggle" id="js-nav-toggle">
<i class="fas fa-bars"></i>
</span>
<div class="logo">
<span class="icon circle-1"></span>
<span class="icon circle-2"></span>
<span class="icon circle-3"></span>
</div>
<ul id="js-menu">
<li>Discover</li>
<li>How it works</li>
<li>Reviews</li>
<li>Blog</li>
</ul>
</nav>

For the mobile navigation burger icon, we are going to obtain that from font-awesome.

To highlight some important attributes, in the <span> tag there is an ID of js-nav-toggle and in the <ul> tag there is an ID of js-menu. We will use these two IDs when we write the JavaScript to toggle the menu. We will get to that later in the article.

The three circles within the <div class=”logo”> tag act as logos so it is not a blank space or some generic “LOGO” text placement.

Next, we will write the mobile-first CSS layout for our navigation and then use media queries to write our desktop layout.

Mobile-First Navigation Layout

Starting with the mobile layout, here is the CSS of the navigation. We use flexbox to arrange our navigation vertically. We position our hamburger icon to go on the far upper left.

nav {
width: 100%;
background-color: #fff;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
}
span.nav-toggle {
font-size: 30px;
display: inline-block;
position: absolute;
top: 20px;
left: 20px;
}
.logo {
margin: 40px 0 40px 0;
}
.icon {
width: 50px;
height: 50px;
border-radius: 50%;
display: inline-block;
}
span.circle-1 {
background-color: #0e89a0;
width: 20px;
height: 20px;
}
span.circle-2 {
background-color: #e7e7da;
width: 30px;
height: 30px;
}
span.circle-3 {
background-color: #ddc249;
width: 40px;
height: 40px;
}
ul {
display: none;
flex-direction: column;
justify-content: center;
padding-left: 0;
}
ul li {
list-style-type: none;
font-size: 15px;
cursor: pointer;
margin: 20px;
text-align: center;
border-bottom-style: solid;
border-bottom-color: #ccc;
border-bottom-width: 1px;
padding: 5px 50px;
}
ul li:first-child{
margin-top: 0;
}
ul li:hover {
opacity: 0.5;
}

We have our mobile layout taken care of. We move on to create the desktop layout of our navigation.

Desktop Navigation Layout

Once the screen width is 800px and more, the navigation expands to being arranged horizontally with the help of flex-direction: row.

Everything else is more or less repositioning the list items and changing the size of the elements inside the navigation to fit in with the desktop layout.

@media screen and (min-width: 800px) {
nav {
height: 100px;
flex-direction: row;
}
.logo {
padding-left: 50px;
margin: 0;
width: 20%;
}
ul {
display: flex;
justify-content: flex-end;
width: 80%;
flex-direction: row;
}
ul li {
display: inline-block;
margin: 0 70px 0 0;
text-align: left;
border-bottom-style: none;
padding: 0;
}
span.nav-toggle {
display: none;
}
}

The hamburger icon shows up on mobile but we hide it on desktop.

We are done styling our mobile and desktop navigation but when we click on the hamburger icon, nothing will work. That is when the JavaScript comes in.

Adding Menu Toggle Functionality

If we look at the markup earlier in the article, the span tag surrounding our hamburger icon has an ID of js-nav-toggle.

We add a click event to that ID and what happens is every time we click on the hamburger icon, a class of .active is added to our ul tag. If we look back at the markup, the ul tag has an id of js-menu.

let mainNav = document.getElementById("js-menu");
let navBarToggle = document.getElementById("js-nav-toggle");
navBarToggle.addEventListener("click", function() {
mainNav.classList.toggle("active");
});

When the active tag is added, the menu opens the navigation. When we click on the hamburger again, the active class is removed and the menu collapses.

By default when our navigation is in mobile mode, the navigation is closed. To make sure the active class works, we will add one more block CSS code right before the media query.

.active{
display: flex;
}
/* media query response layout below */

Now, when we click on the hamburger icon for the first time we can open the navigation.

Our mobile navigation when it is collapsed (by default) and when it is open.

And that concludes our navigation creation.

The Startup

Medium's largest active publication, followed by +612K people. Follow to join our community.

Erica N

Written by

Erica N

An illustrator that solves easy programming algorithms while writing about humorous articles about nothing.

The Startup

Medium's largest active publication, followed by +612K people. Follow to join our community.

More From Medium

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