Today In this article, we’ll show you how to create Responsive Navigation Menu Bar Using HTML & CSS. This type of Navigation Menu Bar is used on the websites For header menu. This kind of Navigation Menu Bar Design looks attractive on the website.
You easily create this Responsive Navigation Menu Bar Using HTML & CSS. then this article will definitely help you. For this, you need to have an idea about basic HTML and CSS then you can understand the following codes. It is designed in a completely modern way.
Some Information About This Navigation Menu Bar
In this program (Navigation Menu Bar), at first, on the webpage, 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. it is fully responsive for any kind of device including mobile phones.
Watch the video tutorial to create Navigation Menu Bar
If you want to learn how to make it completely, you can watch the video tutorial below. Here I have shown how I made these Responsive Navigation Menu Bar step by step completely beautifully. So you can learn how to make these Navigation Menu Bar. This is a youtube video. If you can learn something from the video or if the video seems helpful to you, you must like and subscribe to the video. As a result, I get motivated to create other new designs.
Hopefully, the above video tutorial has helped you to create this Responsive Navigation Menu Bar Tutorial. If you like the video tutorial, be sure to like the video and comment on it so I can encourage you to create new designs.
You might like this:
- Pure CSS Animated Tabs With Slide Indicator
- Create Custom Scrollbar Using CSS
- Neumorphism Calculator Using HTML, CSS & JS
Responive Navigation Menu Bar | Source Codes
To create this program (Navigation Menu Bar). First, you need to create two Files one HTML, and another one is CSS File. After creating these files just paste the following codes in your file.
After 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. You’ve to download files from the given download button to use.
HTML CODE:
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Responsive Navigation Bar</title>
<!---Fontawesome CDN Link-->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet">
<!----Custom CSS Filw Link--->
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav>
<input type="checkbox" id="check">
<label for="check" class="checkbtn">
<i class="fas fa-bars"></i>
</label>
<label class="logo">Codecary</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>
</body>
</html>
After to 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.
CSS CODE:
*{
padding: 0;
margin: 0;
text-decoration: none;
list-style: none;
box-sizing: border-box;
}
body{
font-family: montserrat;
}
nav{
background: #022f69;
height: 80px;
width: 100%;
}
label.logo{
color: #fff;
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: #fff;
font-size: 17px;
padding: 7px 13px;
border-radius: 3px;
text-transform: uppercase;
}
a.active,a:hover{
background: #fff;
transition: .5s;
color: #022f69;
}
.checkbtn{
font-size: 30px;
color: #fff;
float: right;
line-height: 80px;
margin-right: 40px;
cursor: pointer;
display: none;
}
#check{
display: none;
}
@media (max-width: 968px){
label.logo{
font-size: 30px;
padding-left: 50px;
}
nav ul li a{
font-size: 16px;
}
}
@media (max-width: 875px){
.checkbtn{
display: block;
}
nav ul{
position: fixed;
width: 100%;
height: 100vh;
background: #27282c;
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: #0082e6;
}
#check:checked ~ ul{
left: 0;
}
}now you’ve successfully created these Responsive Navigation Menu Bar. If your code does not work or facing any error/problem to comment down or contact us through the contact page. Or you can download the source code here click on the download button below.
