A navbar(navigation bar) is like a menu for your website that helps visitors easily find important pages like Home, About, Services, and Contact. A good navbar makes your website easy to use and look professional.
But what if somebody visits your website on a smaller screen, like a phone or tablet? A normal navbar looks messy or it takes too much space. That's why we need a responsive navbar.
A responsive navbar changes its layout depending on the screen size. That is, if on the computer screen, it all sits in a row-but on a phone, that would shrink into a simplistic "hamburger" menu to make sure the website acts and looks nice on each device. Recently I teach about how to create Login form using HTML and CSS. I hope that blog will also help you to boost your CSS skills.
In this tutorial, we are going to learn how to create a responsive navbar using HTML, CSS, and a little JavaScript. Don’t worry—it’s easier than you think! Let’s get started.
Video Tutorial of Responsive Navbar
I created a detailed video tutorial about how to create a responsive navbar using HTML, CSS, and JavaScript. In the video, I’ve explained everything in simple terms and made it easy to follow, even if you’re a beginner.
Steps to Create Login Form
- Create a new folder by naming it whatever you like, eg: navbar.
- Inside it, you create the following files: index.html, style.css and app.js.
- In this project, we will use Google Fonts(poppins) and Fontawesome for icons.
HTML Structure
Create the structure of the navbar in HTML.
<header>
<div class="nav">
<div class="container">
<div class="main-nav">
<div class="logo">
<h3>Uvais Codes</h3>
</div>
<div class="nav-menu">
<ul>
<li>Home</li>
<li>About us</li>
<li>Services</li>
<li>Projects</li>
<li>Blog</li>
<li>Contact us</li>
</ul>
</div>
<div class="nav-btn">
<button>
Get in Touch <i class="fa-solid fa-arrow-right"></i>
</button>
</div>
<div class="icon">
<i id="bar" class="fa-solid fa-bars"></i>
</div>
</div>
</div>
</div>
</header>
CSS
Now style the navbar making it visually appealing and responsive.
@import
url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", serif;
}
body {
background-color: #FFF6F9;
}
.container {
margin: auto;
width: 95%;
}
ul li {
list-style-type: none;
}
.nav {
width: 100%;
padding: 16px 0;
background-color: #fff;
}
.main-nav {
display: flex;
justify-content: space-between;
align-items: center;
}
.logo h3 {
font-size: 22px;
}
.nav-menu ul {
display: flex;
margin-left: 140px;
}
.nav-menu ul li {
margin-right: 60px;
font-size: 17px;
font-weight: 500;
cursor: pointer;
transition: all 0.4s ease;
}
.nav-menu ul li:hover {
color: #ff0a54;
}
.nav-btn button {
border: none;
outline: none;
background-color: #ff0a54;
color: #fff;
padding: 16px 24px;
border-radius: 30px;
font-size: 15px;
font-weight: 600;
cursor: pointer;
transition: all 0.4s;
}
.nav-btn button:hover {
background-color: #000;
transform: translateY(-5px);
}
.nav-btn button i {
margin-left: 4px;
transform: rotate(-45deg);
transition: all 0.4s;
}
.nav-btn button:hover i {
transform: rotate(0);
}
.icon {
font-size: 25px;
display: none;
}Responsive Design
Now let's make the navbar responsive for mobile and tablet devices.
@media screen and (max-width: 992px) {
.nav-menu ul {
margin-left: 0;
}
.nav-menu ul li {
font-size: 20px;
font-weight: 500;
}
.icon {
display: block;
}
.nav-btn button {
font-size: 14px;
padding: 10px 15px;
margin-left: 50px;
background-color: #fff;
color: #ff0a54;
}
.nav {
background-color: #ff0a54;
color: #fff;
}
.nav-menu ul {
display: flex;
flex-direction: column;
align-items: flex-start;
background-color: #ff0a54;
color: #fff;
position: absolute;
top: 73px;
left: -100%;
/* Initially off-screen */
height: 100%;
width: 100%;
text-align: center;
padding: 50px 0 0 30px;
gap: 30px;
z-index: 1;
transition: transform 0.5s ease-in-out;
/* Smooth slide effect */
transform: translateX(0);
/* Default position */
}
.nav-menu ul.showMenu {
transform: translateX(100%);
/* Slide in from left */
}
}
/* tablet responsive */
@media screen and (min-width: 768px) and (max-width: 992px) {
.nav-btn button {
font-size: 14px;
padding: 10px 15px;
margin-left: 400px;
background-color: #fff;
color: #ff0a54;
}
}
@media screen and (min-width: 993px) and (max-width: 1024px){
.nav-menu ul li{
margin-right: 25px;
font-size: 16px;
}
.nav-btn button{
padding: 10px 16px;
font-size: 14px;
}
}JavaScript
The JavaScript code toggles the navigation menu for mobile screens. When the toggle icon (hamburger menu) is clicked, the menu slides in or out.
const icon = document.querySelector(".icon");
const ul = document.querySelector(".nav-menu ul");
const bar = document.getElementById("bar");
icon.addEventListener("click", () =>{
console.log(ul);
ul.classList.toggle("showMenu");
if (ul.classList.contains("showMenu")) {
bar.className = "fa-solid fa-xmark";
} else {
bar.className = "fa-solid fa-bars";
}
} )Conclusion
By following these steps, you’ve successfully create a simple, responsive navbar using HTML, CSS, and JavaScript. 🎉 Customize logo, menu and button as your design.
If you found this helpful, don’t forget to check out more tutorials on Uvais Codes! 🚀
Download the source Code
You May Like This:
Social Media Icons with Hover Effects
If you like, you can subscribe my youtube channel. I create awesome web contents. Subscribe
Thanks For reading.
