Create Responsive Navbar Using HTML CSS
Today we will create a responsive navbar using HTML and CSS. Using our HTML, we will create the structure of the navbar, including elements such as a logo, navigation links. We will then use CSS to style the navbar, making sure it looks great on any device. We will use media queries to make sure the navbar is adjusted to the size of the device it’s being viewed on. This will make sure the navbar looks great on any device, from large desktop monitors to small mobile phones.
So, the first step here is to create an HTML file. Now, let’s move on to pasting the code into our layout.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Resonsive Navbar /Letgocoding</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<nav>
<input type="checkbox" id="check" name="">
<label for="check" class="checkbtn">
<i class="fa-2x fa fa-bars"></i>
</label>
<label class="logo">NAVBAR</label>
<ul>
<li><a 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>
<button type="login" class="button">Login</button>
<button type="reg" class="button">Register</button>
</ul>
</nav>
</body>
</html>We will use flexbox to make sure the elements are laid out correctly on the page, and will also use transitions to make the navbar look smooth when it is resized. Once we have the navbar looking perfect. With a bit of imagination, we can make the navbar look great and be highly functional. With a few hours of work, we can create a stunning, responsive navbar that looks great on any device.
So, the second step here is to create an CSS file. Now, let’s move on to pasting the code into our layout.
*{
padding: 0;
margin: 0;
box-sizing: border-box;
text-decoration: none;
list-style-type: none;
}
body{
font-family: sans-serif;
}
nav{
background: #0f183c;
height: 80px;
width: 100%;
position: absolute;
}
button.button {
padding: 10px;
width: 84px;
background: blue;
border: none;
color: #fff;
font-size: 15px;
font-weight: bolder;
border-radius: 7px;
cursor: pointer;
}
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: white;
font-size: 17px;
padding: 7px 13px;
text-transform: uppercase;
}
a:hover,a.active{
background: #0000ff;
transition: .4s;
}
.checkbtn{
color: white;
margin-top: 22px;
float: right;
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: #0c3156;
top: 80px;
left: -1000px;
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{
background: none;
color: #0000ff;
}
#check:checked ~ ul{
left: 0;
}
}
