HTML code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Navigation Bar </title>
<link rel="stylesheet" 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>
<!-- ============================================= -->
<!-- How to Create Responsive Navigation Bar using
HTML and CSS -->
<nav>
<input type="checkbox" id="check">
<label for="check" class="checkbox">
<i class="fa fa-bars"></i>
</label>
<label class="logo">sWebCode</label>
<ul>
<li><a href="http://" class="active">Home</a></li>
<li><a href="http://" >About</a></li>
<li><a href="http://" >Service</a></li>
<li><a href="http://" >Contact us</a></li>
<li><a href="http://" >FeedBack</a></li>
</ul>
</nav>
<!-- =================================================== -->
<div class="hero_section"></div>
</body>
</html>
CSS code
* {
padding: 0;
margin: 0;
text-decoration: none;
list-style: none;
box-sizing: border-box;
}
body {
font-family: monospace;
}
/* ======================================================= */
/* How to Create Responsive Navigation Bar using HTML and CSS */
nav {
background: #0082e6;
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: 60px;
margin: 0px 5px;
}
nav ul li a {
color: white;
font-size: 16px;
padding: 7px 13px;
border-radius: 3px;
text-transform: uppercase;
}
a.active,
a:hover {
background: #1b9bff;
transition: 0.5s;
}
.checkbtn {
font-size: 30px;
color: white;
float: right;
line-height: 80px;
margin-right: 40px;
cursor: pointer;
display: none;
}
#check {
display: none;
}
.hero_section {
background-image: url("pexels-kristina-paukshtite-712876.jpg");
background-position: center;
background-size: cover;
width: 100%;
height: 87vh;
}
@media screen and (max-width: 952px) {
label.logo {
font-size: 30px;
padding-left: 50px;
}
nav ul li a {
font-size: 16px;
}
}
@media screen and (max-width: 898px) {
.checkbtn {
display: block;
}
ul {
position: fixed;
width: 100%;
height: 100vh;
background: #2c3e50;
top: 80px;
text-align: center;
left: -100%;
transition: all 0.05s;
}
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;
}
}
/* How to Create Responsive Navigation Bar using HTML and CSS */
/* ========================================================== */
GitHub Code Preview LIVE
Post a Comment