Hello readers, Today in this blog you’ll learn how to create a Responsive Navigation Menu using only HTML & CSS. Earlier I’ve shared a blog on how to create a Responsive Chatbox Widget. In this blog, I’m going to create a Responsive Navbar that is based on pure CSS.
You may have seen the Navigation Bar on many websites. Generally, A navigation bar is a user interface (UI) element within a webpage that includes links to other sections of the website. The navigation bar is the essential UI element of a website’s design.
In this program (Responsive Navigation Menu Bar Design), there is a navbar on the top of the webpage and in this navbar, there is a logo on the left side and some navigation links on the right side of the navbar. On the PC, these navigation links are aligned in a horizontal line but on mobile devices, these links are aligned vertically. This is a pure CSS program and I didn’t use JavaScript or any JavaScript library to create this Navigation Bar.
I used CSS @media property to make this navbar responsive for any devices – mobile, tab, and pc. You can watch a full video tutorial on this program (Responsive Navbar Design).
Video Tutorial of Responsive Navigation Menu Bar Design
In the video, you have seen the Responsive Navbar and I hope you have understood the basic codes behind creating this Navbar. As you have seen, on the mobile devices these navigation links are aligned vertically and there is also shown a menu button that toggles the Navbar to hide or show. To make this icon as a toggle button, I used HTML <input type=”checkbox’> and control this checkbox with label tag.
If you like this program (Responsive Navigation Menu Bar or Navbar) and want to get source codes. You can easily get the source codes of this program. To get the source codes you just need to scroll down. You can use this navbar in your HTML pages, websites, and projects.
You might like this:
Responsive Navigation Menu Bar [Source Codes]
To create this program (Responsive Navigation Menu Bar or Navbar). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following codes in your file.
First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.
<!DOCTYPE html> <!-- Created By CodingNepal --> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>Responsive Navigation Menu</title> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <nav> <div class="logo"> Brand </div> <input type="checkbox" id="click"> <label for="click" class="menu-btn"> <i class="fas fa-bars"></i> </label> <ul> <li><a class="active" href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Services</a></li> <li><a href="#">Gallery</a></li> <li><a href="#">Feedback</a></li> </ul> </nav> <div class="content"> <div> Responsive Navigation Menu Bar Design </div> <div> using only HTML & CSS </div> </div> </body> </html>
Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap'); *{ margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; } nav{ display: flex; height: 80px; width: 100%; background: #1b1b1b; align-items: center; justify-content: space-between; padding: 0 50px 0 100px; flex-wrap: wrap; } nav .logo{ color: #fff; font-size: 35px; font-weight: 600; } nav ul{ display: flex; flex-wrap: wrap; list-style: none; } nav ul li{ margin: 0 5px; } nav ul li a{ color: #f2f2f2; text-decoration: none; font-size: 18px; font-weight: 500; padding: 8px 15px; border-radius: 5px; letter-spacing: 1px; transition: all 0.3s ease; } nav ul li a.active, nav ul li a:hover{ color: #111; background: #fff; } nav .menu-btn i{ color: #fff; font-size: 22px; cursor: pointer; display: none; } input[type="checkbox"]{ display: none; } @media (max-width: 1000px){ nav{ padding: 0 40px 0 50px; } } @media (max-width: 920px) { nav .menu-btn i{ display: block; } #click:checked ~ .menu-btn i:before{ content: "\f00d"; } nav ul{ position: fixed; top: 80px; left: -100%; background: #111; height: 100vh; width: 100%; text-align: center; display: block; transition: all 0.3s ease; } #click:checked ~ ul{ left: 0; } nav ul li{ width: 100%; margin: 40px 0; } nav ul li a{ width: 100%; margin-left: -100%; display: block; font-size: 20px; transition: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55); } #click:checked ~ ul li a{ margin-left: 0px; } nav ul li a.active, nav ul li a:hover{ background: none; color: cyan; } } .content{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; z-index: -1; width: 100%; padding: 0 30px; color: #1b1b1b; } .content div{ font-size: 40px; font-weight: 700; }
That’s all, now you’ve successfully created a Responsive Navigation Menu Bar Design using only HTML & CSS. If your code doesn’t work or you’ve faced any error/problem then please comment down or contact us from the contact page.
Hi the menu bar isn’t showing in the other pages only in the home page on responsive mode , can you help me?
Hello I need to hide nav menu after click because my page is onepage and links are anchored. When I click to link menu is not dissapearing, page is moving to proper place but menu is covering. Thank you for answer!
the bars are not showing
Thank you for sharing brother.
bro after clicking hamburger button menu is not showing i’ve tried same method as you have shown but it is not working what should i do ….can i show you my html file??
Thank you !
But there was a problem for me. When I added more text into the content, The upper texts will not be shown.
What can do now ?
thank you
Thank You for your wonderful information
You’re welcome
Hey, I tried to use position sticky function after a banner but it isn’t working idk where is the problem , while i use position fixed there isn’t any problem but looking kinda odd when scrolling .
If you’re trying to make sticky navbar then watch this video – Sticky Navbar on Scroll
I have converted this code to angular
but its not comming as same
Good Day
Am Muhsin a ICT student
i just copied your code up here about and i try to run it but it is not working i have try try but i could not find the problem
am learning Navigation Using HTML CSS and JS
if you could help it is going to be helpful to me
here is my Gmail [email protected]
You're welcome
Thank you sir for this helpful code
Amazing good job!! I hope you will tutorial to build a complete website using html css and js. Love from Vietnam
Make sure you're connected to the Internet.
Hi
Hi i have recently tried this codeset in react js solution. The problem is the ‘for=”click” is not working in my solution. Checking the checkbox the funtionality is working fine. While clicking on Menu icon the checkbox is not checked.Could you please help me?
Nice work bro. I copied the codes and made two changes only:
1. Instead of "Brand" i wrote my work name
2. Changed the names of the list items
But, when i shrink the browser window, I do not get the menu button (which shows up as the 3 lines in the top right corner). I am using Google Chrome to view this. Any idea what can be wrong?
hello
When I squeeze the chrome window, the menu lines (3 lines i the top right corner) do not appear. Any ideas why?
This script is the FontAwesome CDN link for icons and it's an online CDN link so you must have to connected with the Internet to show or use icons. Otherwise, you can also download offline file to use as offline. And yes JavaScript is not used to make this Navigation Bar.
Yes you can
bro can i use the code in my blog
You're welcome bro…Keep visiting!
Thank you bro, I love you xD
You're welcome…Keep visiting!
thank you so much sir
Let's me see…contact me on Instagram.
thank you so much bro no one these days give free to download and you are doing really happy for the beginners to learn.Thank you bro God bless you with all needs
Happy to hear that bro
On my website, whenever I scale it to the Iphone x size, there is a small space between the navbar and the menu. How do I fix this?
Thank you bro 🙂
amazing bro…
You are free to use them in your personal and commercial projects as long as you don't claim them as your own.
hey bro what about copyright can i use everything i see in this tutorial?
Thank you bro…Keep visiting!
nice bro
There is no search box in this navbar you may did some mistakes…please download the code files from the above link.
bro its not working properly it can shows search option in both desktop and mobile view.Also there is not navbar in mobile view