Responsive_navbar

HTML

<!DOCTYPE html>

<head>

<title>Responsive_Navbar</title>

</head>

<body>

<nav>

</label>

<ul>

<li><a href="#">About-Us</a></li>

<li><a href="#">Service</a></li>

<li><a href="#">Contact-Us</a></li>

<li><a href="#">Feedback</a></li>

</ul>

</nav>

</body>

</html>

CSS

/* Replace with your CSS Code 
(Leave empty if not needed) */                                           
* {

margin: 0;

padding: 0;

text-decoration: none;

list-style: none;

box-sizing: border-box;

}

body {

font-family: monospace;

}

nav {

background-color: rgb(17, 17, 51);

height: 80px;

width: 100%;

}

.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;

}

.active,a:hover {

background: #1B9BFF;

transition: .5s;

}

.checkbtn {

font-size: 30px;

color: white;

float: right;

line-height: 80px;

margin-right: 40px;

cursor: pointer;

display: none;

}

#check {

display: none;

}

.main {

background-image: url("background.jpg");

width: 100%;

height: 89vh;

background-repeat: no-repeat;

background-size: cover;

}

@media (max-width : 950px) {

.logo {

font-size: 30px;

padding-left: 50px;

}

nav ul li a {

font-size: 16px;

}

@media (max-width : 850px) {

.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,.active {

background: none;

color: #0083E6;

}

#check:checked ~ ul {

left: 0;

}

JS

Responsive_navbar

Comments 0