Responsive Navigation Menu Bar in HTML CSS
Hey friends, today in this blog you'll learn how to create a Fully Responsive Navigation Menu Bar using only HTML & CSS. In the earlier blog, I have shared how to create a Responsive Sidebar Menu using HTML & CSS and now it's time to create a navigation bar in HTML.
As you know the Menu Bar or Navigation Bar (Navbar) is important for any kind of website. Many websites have a responsive navbar or a responsive navbar with a dropdown menu. Essentially, responsive design is a way to put together a website so that it automatically scales its content and elements to match the screen size on which it is viewed. It keeps images from being larger than the screen width and prevents visitors from mobile devices from needing to do extra work to read your content.
In our design (Responsive Navigation Bar), as you can see in the preview image, there is a horizontal navigation bar or navbar with a logo on the left side and some navigation links on the right side. This is a very simple navigation bar and it is created using only HTML & CSS. The best part about this navigation bar is, it is fully responsive for any kind of device including mobile phones. On the pc, this navigation bar is displayed in a horizontal line but on mobile devices, this navbar or navigation bar is displayed in a vertical line. On the mobile, you have the option to show or hide the menu bar by clicking on the hamburger menu icon.
The concept behind shows or hide menu bar on menu icon click is simple. I used HTML <input> and <label> tag to show or hide menu bar. When the checkbox is checked and the menu bar is shown and when the checkbox is unchecked menu bar is hidden. If you're feeling difficulty understanding what I am saying. You can watch a full video tutorial on this navigation bar in HTML.
----------------------------------------------------------------------------------------------------------------------------------------
Source Codes.
Before sharing the source codes of this responsive navbar. Let's a few talks about the main tags and codes of this design. To create this responsive navbar I had used HTML & CSS only which means this is a pure CSS program. As you already know, this program is <ul> and <li> based design, that’s why we can create a menu or navigation links easily. I've used <input type="checkbox"> and <label for=""> tag to toggle menu bar in HTML for the mobile version. I also used the Fontawesome for a hamburger icon.
There are many things I left. Because I can't say all things in writing. I'm just talking about the main codes of this menu bar but don't worry you'll understand all the codes and concepts after getting the source code of this responsive navbar. To create this responsive navigation bar. 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 into your file. You can also download the source code files of this dropdown menu CSS design from the below download button.
----------------------------------------------------------------------------------------------------------------------------------------
HTML CODE.
<!-- JD-KALSARIYA -LINK= https://jd-kalsariya.blogspot.com/ -->
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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"/>
</head>
<body>
<nav>
<input type="checkbox" id="check">
<label for="check" class="checkbtn">
<i class="fas fa-bars"></i>
</label>
<label class="logo">LOGO</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="#">Contact</a></li>
<li><a href="#">Feedback</a></li>
</ul>
</nav>
<section></section>
</body>
</html>
----------------------------------------------------------------------------------------------------------------------------------------
CSS CODE.
* {
padding: 0;
margin: 0;
text-decoration: none;
list-style: none;
box-sizing: border-box;
}
body {
font-family: montserrat;
}
nav {
background: #000;
height: 80px;
width: 100%;
}
label.logo {
color: white;
font-size: 35px;
line-height: 80px;
padding: 0 100px;
font-weight: bold;
}
nav ul {
float: right;
margin-right: 20px;
}
nav ul li {
display: inline-block;
line-height: 80px;
margin: 0 5px;
}
nav ul li a {
color: white;
font-size: 17px;
padding: 7px 13px;
border-radius: 3px;
text-transform: uppercase;
}
a.active,
a:hover {
background: #1b9bff;
transition: .5s;
}
.checkbtn {
font-size: 30px;
color: white;
float: right;
line-height: 80px;
margin-right: 40px;
cursor: pointer;
display: none;
}
#check {
display: none;
}
@media (max-width: 952px) {
label.logo {
font-size: 30px;
padding-left: 50px;
}
nav ul li a {
font-size: 16px;
}
}
@media (max-width: 858px) {
.checkbtn {
display: block;
}
ul {
position: fixed;
width: 100%;
height: 100vh;
background: #FF7777;
top: 80px;
left: -100%;
text-align: center;
transition: all .5s;
}
nav ul li {
display: block;
margin: 50px 0;
line-height: 30px;
}
nav ul li a {
font-size: 20px;
}
a:hover,
a.active {
background: none;
color: #9090FF;
}
#check:checked~ul {
left: 0;
}
}
section {
background: url(bg1.jpg) no-repeat;
background-size: cover;
height: calc(100vh - 80px);
}
----------------------------------------------------------------------------------------------------------------------------------------
OUT-PUT.
--------------------------------------------------------------------------------------------------------------------------------
0 Comments