NavBar.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<nav>
<img src="circle-cropped.png">
<input type="checkbox" id="menu"/>
<label for="menu" class="menu-bar">
<i class="fa fa-bars"></i>
</label>
<label>CODING ZONE</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="#">Login</a></li>
</ul>
</nav>
</body>
</html>
style.css
*{
margin: 0;
padding: 0;
text-decoration: none;
list-style: none;
font-family: monospace;
box-sizing: border-box;
}
nav{
background: #ED2939;
height: 80px;
width: 100%;
}
label{
line-height: 80px;
font-size: 30px;
color:white;
margin-left: 50px;
}
nav ul{
float: right;
margin-right: 20px;
}
nav ul li{
display: inline-block;
line-height: 80px;
margin: 0 10px;
}
img{
height: 40px;
width: 40px;
display: none;
}
nav ul li a{
color:white;
font-size: 20px;
padding: 6px 15px;
}
nav ul li a:hover{
background-color: white;
color:red;
border-radius: 10px;
transition: 0.5s;
}
#menu{
display: none;
}
.menu-bar{
float: right;
margin-right: 20px;
display: none;
cursor: pointer;
line-height: 80px;
}
@media (max-width: 950px){
label{
line-height: 80px;
font-size: 28px;
}
nav ul li a{
color:white;
font-size: 18px;
padding: 5px 11px;
}
}
@media (max-width: 750px){
.menu-bar{
display: block;
}
ul{
position: fixed;
width: 100%;
height: 100vh;
background: #FA8072;
top:80px;
left:-100%;
text-align: center;
transition: all 0.5s;
}
nav ul li{
display: block;
}
nav ul li a{
font-size: 20px;
}
nav ul li a:hover{
background: white;
color:red;
font-style:italic;
}
}
@media (max-width: 375px){
img{
display: inline-block;
margin-top: 20px;
margin-left: 30px;
}
label{
display: none;
}
}
#menu:checked ~ ul{
left:0;
}
Responsive Navigation Bar Image
Video for Responsive Header :
Check out my YouTube channel for more such videos :
https://www.youtube.com/channel/UCrgTxZY_mtmFV0EpHeaRezg?view_as=subscriber
Follow me on my facebook page
https://www.facebook.com/Coding-Zone-101009098243029/?modal=admin_todo_tour
Post a Comment