Navigation bars are essential components used a lot in websites and web apps. As a software developer, you will need to be able to create and customize them, either for yourself or for a client project.
In this article, you'll learn how to create a simple mobile responsive navigation bar with HTML, CSS, and JavaScript. This article assumes that you have basic knowledge of HTML, CSS, and JavaScript.
Let's get right into it.
Step 1 - Add HTML Markup
Before adding the HTML markup for our navigation bar, let's import a hamburger icon from Google icons. we'll be using the hamburger icon to toggle the navigation menu in small screens.
To import and use the hamburger icon from google, add the snippet below in the head of your HTML file:
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" />
Next, add the markup below to your HTML file. I will explain it later.
<header class="header">
<div class="nav-container">
<span class="logo">NavBar</span>
<nav class="nav">
<ul class="nav--ul__one">
<li class="nav-link"><a href="#">Home</a></li>
<li class="nav-link"><a href="#">Contact</a></li>
<li class="nav-link"><a href="#">About Us</a></li>
</ul>
<ul class="nav--ul__two">
<li class="nav-link"><a href="#">Login</a></li>
<li class="nav-link"><a href="#">Signup</a></li>
</ul>
</nav>
<span class="hamburger-menu material-symbols-outlined">menu</span>
</div>
</header>
The HTML markup consists of the following:
- A
<header>
element with the class ofheader
that wraps the all the elements. - Inside the
header
, you have a containerdiv
with the classnav-container
. Thisdiv
wraps thelogo
, navigation links, and the hamburger menu. - A
<span>
element with the classlogo
. - A
<nav>
element with the classnav
as the main navigation container. This container holds the navigation links and hamburger menu icon. - Inside the
<nav>
, you have two list of navigation links each represented with a<ul>
with the class ofnav--ul__one
andnav--ul__two
respectively. - You have another
<span>
element with the classhamburger-menu
and an icon classmaterial-symbols-outlined
which represents the hamburger menu icon.
Here is the result:
With that done, now let's add some styles to make our navigation bar visually appealing.
Step 2 - Style the Navigation Bar
We'll start by resetting the default padding and margin of every element of the page, and add some basic styling to a few elements.
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
font-family: Arial, Helvetica, sans-serif;
}
ul {
list-style: none;
}
a {
text-decoration: none;
color: inherit;
}
Now that we are done with some basic styling, let's focus on styling the core navigation bar itself.
Navigation Menu Styles
Here is the markup to style the navigation:
header {
background: #4D4DDB;
color: white;
padding: .5rem 0;
}
.nav-container {
display: flex;
align-items: center;
justify-content: space-between;
width: 90%;
margin: 0 auto;
}
.nav-container .logo {
font-size: 2rem;
font-weight: bold;
}
.nav {
display: flex;
flex-grow: 1;
}
.nav--ul__one {
margin: 0 auto;
}
.nav-container, .nav--ul__one,
.nav--ul__two {
display: flex;
gap: 1.6rem;
font-size: 1.2rem;
}
.hamburger-menu {
display: none; /* Hidden by default for larger screens */
cursor: pointer;
}
Our navigation bar would look like this:
Next, let's add some media query to make our navigation bar mobile responsive.
@media (max-width: 700px) {
.nav-container .logo {
font-size: 1.2rem;
z-index: 2;
}
.nav {
flex-direction: column;
gap: 2rem;
}
.nav--ul__one,
.nav--ul__two {
flex-direction: column;
gap: .6rem;
}
.hamburger-menu {
display: block;
z-index: 2;
}
.nav {
position: absolute;
top: 0;
right: -100%;
bottom: 0;
width: 100%;
padding-top: 6rem;
align-items: center;
text-align: center;
background-color: #4D4DDB;
color: white;
transition: 0.15s ease-in-out;
}
.nav.active {
right: 0;
}
}
First, this arranges the elements on small screens, and most importantly, making the nav
slide in from the right when active but of course, it is not functional. we'll do that next.
Here is the result so far:
Now, let's work on the functionality in the next section.
Step 3 - Add JavaScript Functionality
Here are the steps we'll use to add javascript functionality to the navigation bar:
- Get references to the
hamburger-menu
andnav
- Add a click event listener to the
hamburger-menu
- Toggle the
active
class on thenav
to show/hide it
const hamburgerMenu = document.querySelector(".hamburger-menu");
const nav = document.querySelector(".nav");
hamburgerMenu.addEventListener("click", () => {
nav.classList.toggle("active")
});
When the hamburger-menu
is clicked, it toggles the visibility of the menu by adding or removing the active
class.
And with this, you’ve successfully built a mobile responsive navigation bar using just HTML, CSS, and JavaScript.
Conclusion
I sincerely hope you found this post interesting or useful. If you did, kindly react to it and share with your friends or follow my account so you won't miss any future postings. Thanks for reading.
Top comments (0)