 |
| Responsive Navigation Bar using HTML & CSS |
Hello companions, today in this blog you'll figure out how to make a Completely Responsive Route Menu Bar utilizing just HTML and CSS. In the prior blog, I have shared how to make a Responsive Sidebar Menu utilizing HTML and CSS and presently it is the right time to make a route bar in HTML.
As you most likely are aware the Menu Bar or Route Bar (Navbar) is significant for any sort of site. Numerous sites have a responsive navbar or a responsive navbar with a dropdown menu. Basically, responsive plan is a method for assembling a site so it consequently scales its substance and components to match the screen size on which it is seen. It holds pictures back from being bigger than the screen width and keeps guests from cell phones from expecting to accomplish additional work to peruse your substance.
In our plan (Responsive Route Bar), as you can find in the review picture, there is a flat route bar or navbar with a logo on the left side and some route joins on the right side. This is an exceptionally basic route bar and it is made utilizing just HTML and CSS.
The greatest aspect of this route bar is, it is completely responsive for any sort of gadget including cell phones. On the pc, this route bar showed in a level line however on cell phones, this navbar or route bar showed in an upward line. On the versatile, you have the choice to show or conceal the menu bar by tapping on the burger menu symbol.
Video instructional exercise of Responsive Route Menu Bar
In the video instructional exercise, you have seen this is an unadulterated CSS responsive route bar and I've utilized CSS @media property to make this route bar completely responsive for cell phones. To get source codes of this program then you can undoubtedly duplicate the codes of this instructional exercise from the given duplicate boxes or you can likewise download the code records of this route menu bar.
In the event that you're a novice and you know a tad of HTML and CSS then the codes and idea of this responsive route menu bar will assist you with grasping HTML and CSS more. This is an exceptionally straightforward responsive route bar with not many and clean codes.
Responsive Route Menu Bar [Source Codes]
To make this responsive route bar. To begin with, you really want to make two Documents one HTML Record and another is CSS Document. In the wake of making these documents simply glue the accompanying codes into your record. You can likewise download the source code documents of this responsive route menu bar from the underneath download button.
In the first place, make a HTML record with the name of index.html and glue the given codes in your HTML document. Keep in mind, you've to make a record with .html expansion.
<!DOCTYPE html>
<!-- Created By CodingNepal - www.Technologywang.com -->
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Responsive Navbar | CodingWang</title>
<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">DesignW</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>Second, make a CSS document with the name of style.css and glue the given codes in your CSS record. Keep in mind, you've to make a document with .css expansion.
*{
padding: 0;
margin: 0;
text-decoration: none;
list-style: none;
box-sizing: border-box;
}
body{
font-family: Arial, Helvetica, sans-serif;
}
nav{
background: #d90000;
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: #d90000;
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: #2c3e50;
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: #d90000;
}
#check:checked ~ ul{
left: 0;
}
}
section{
background: url(bg1.jpg) no-repeat;
background-size: cover;
height: calc(100vh - 80px);
}That is all, presently you've effectively made a Responsive Route Menu Bar utilizing HTML and CSS. In the event that your code works or you've faces no mistakes/issues then if it's not too much trouble, download the source code documents from the given download button. It's free and a .compress document will be downloaded then you've to separate it.
Post a Comment