Hey everyone! Welcome to today’s tutorial. In today’s tutorial, we will learn how to create one of the essential parts of any website i.e the navigation bar. Creating a responsive navigation bar is a tricky thing for many developers.
So in this tutorial, we will learn how to create a responsive tutorial using some quick and easy steps. Though it might seem daunting to look at, I assure you it is super easy. To create this responsive navigation bar we need HTML, CSS and just a little bit of Javascript. Let us get started with the tutorial.
Video Tutorial:
I have a video version of this tutorial on my youtube channel. So if you are interested to learn along with the video tutorial you can check out the video down below. I post new tips and tutorials on my channel every alternate day. So be sure to subscribe so you don’t miss any of this exciting stuff.
Project Folder Structure:
Now before we start coding, let us create the project folder structure. We name the project folder as – Responsive Navbar. Inside this folder, we have three files – index.html, style.css and script.js.
The first file is index.html which is an HTML document. Next, we have the stylesheet named style.css. And finally, we have the script file we have named script.js. Now that our folder is ready we can move on with the coding.
HTML:
We start with the HTML section. First, copy the code below and paste it into your HTML document. This creates the basic layout of the navbar.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Responsive Navigation Bar</title>
<!-- Font Awesome Icons -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
/>
<!-- Google Fonts -->
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@600;700&display=swap"
rel="stylesheet"
/>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header>
<nav>
<a href="#home" id="logo">Site Logo</a>
<i class="fas fa-bars" id="ham-menu"></i>
<ul id="nav-bar">
<li>
<a href="#home">Home</a>
</li>
<li>
<a href="#about">About</a>
</li>
<li>
<a href="#services">Services</a>
</li>
<li>
<a href="#team">Team</a>
</li>
<li>
<a href="#contact">Contact</a>
</li>
</ul>
</nav>
</header>
<section id="home">
<h1>Home Section</h1>
</section>
<!-- Script -->
<script src="script.js"></script>
</body>
</html>
CSS:
Now that the basic layout is ready. We add style to the navbar using CSS. For this copy, the code provided below and paste it into your CSS file. We make the navigation bar responsive using media queries. The three breakpoints for media queries used in this tutorial are at max-width: 991px, max-width: 767px, max-width: 575px.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html {
font-size: 62.5%;
}
*:not(i) {
font-family: "Poppins", sans-serif;
}
header {
position: fixed;
width: 100%;
background-color: #2c8eec;
padding: 3rem 5rem;
}
nav {
display: flex;
justify-content: space-between;
align-items: center;
}
nav ul {
list-style: none;
display: flex;
gap: 2rem;
}
nav a {
font-size: 1.8rem;
text-decoration: none;
}
nav a#logo {
color: #000000;
font-weight: 700;
}
nav ul a {
color: #ffffff;
font-weight: 600;
}
nav ul a:hover {
border-bottom: 2px solid #ffffff;
}
section#home {
height: 100vh;
display: grid;
place-items: center;
}
h1 {
font-size: 4rem;
}
#ham-menu {
display: none;
}
nav ul.active {
left: 0;
}
@media only screen and (max-width: 991px) {
html {
font-size: 56.25%;
}
header {
padding: 2.2rem 5rem;
}
}
@media only screen and (max-width: 767px) {
html {
font-size: 50%;
}
#ham-menu {
display: block;
color: #ffffff;
}
nav a#logo,
#ham-menu {
font-size: 3.2rem;
}
nav ul {
background-color: black;
position: fixed;
left: -100vw;
top: 73.6px;
width: 100vw;
height: calc(100vh - 73.6px);
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
transition: 1s;
gap: 0;
}
}
@media only screen and (max-width: 575px) {
html {
font-size: 46.87%;
}
header {
padding: 2rem 3rem;
}
nav ul {
top: 65.18px;
height: calc(100vh - 65.18px);
}
}
Javascript:
Finally, we add functionality to the ham menu using Javascript. This enables users to open and close the side nav by simply clicking on the menu bars. Now copy the code provided below and paste it into your script file.
let hamMenuIcon = document.getElementById("ham-menu");
let navBar = document.getElementById("nav-bar");
let navLinks = navBar.querySelectorAll("li");
hamMenuIcon.addEventListener("click", () => {
navBar.classList.toggle("active");
hamMenuIcon.classList.toggle("fa-times");
});
navLinks.forEach((navLinks) => {
navLinks.addEventListener("click", () => {
navBar.classList.remove("active");
hamMenuIcon.classList.toggle("fa-times");
});
});
That’s it for this tutorial. If you have any issues while creating this project, you can download the source code by clicking on the download code button below. Also, don’t forget to drop your queries, suggestions and feedback in the comments below.
Happy Coding!
Hi there, how can i make this codes into a sticky navbar?
give position:sticky; to a avbar and give its direction like top:0;
Its not actually working, like i’m not able to click the hamburger