If you want to create a navbar like this, you can create it with a copy of the source code provided.
STEPS FOR CREATING.
STEP 01
Copy this code and paste it into the HTML file.
<!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>Navbar Design</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav>
<input type="checkbox" id="check">
<label for="check" class="checkbtn">
<img src="toggelicon.png" alt="Toggle Icon">
</label>
<label class="logo" for="">NAVBAR</label>
<ul>
<li><a class="active" href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">contect</a></li>
<li><a href="#">sign in</a></li>
<li><a href="#">services</a></li>
</ul>
</nav>
</body>
</html>
STEP 02
Copy this code and paste it into the CSS.
* {
padding: 0%;
margin: 0%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
a {
text-decoration: none;
}
a:hover,
a:focus {
text-decoration: none;
outline: none;
}
li {
list-style: none;
list-style-type: none;
}
li:hover,
li:focus {
list-style-type: none;
}
button:focus {
outline: none;
box-shadow: none;
}
:root {
--color1: #0083e6 !important;
--color2: #2c3e50 !important;
--white: #ffffff !important;
--black: #000000 !important;
}
/* Use these statement if you want to call colors anywhere.
var(--color1)
var(--color2)
var(--white)
var(--black)
*/
/* ******************Navbar CSS Start******************* */
nav {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
background-color: var(--color1);
width: 100%;
height: 80px;
}
label.logo {
color: var(--white);
font-size: 35px;
line-height: 80px;
padding: 0px 100px;
font-weight: bold;
}
nav ul {
float: right;
margin-right: 20px;
}
nav ul li {
display: inline-block;
line-height: 80px;
margin: 0px 5px;
}
nav ul li a {
color: var(--white);
font-size: 17px;
padding: 7px 13px;
border-radius: 3px;
text-transform: uppercase;
}
a.active,
a:hover {
background-color: var(--color2);
-webkit-transition: 0.5s;
transition: 0.5s;
}
.checkbtn img {
width: 30px;
height: 30px;
line-height: 80px;
/*If you want to change the color of the toggle icon to black.*/
/* filter: invert(1)!important; */
}
.checkbtn {
float: right;
margin-right: 40px;
line-height: 100px;
cursor: pointer;
display: none;
}
#check {
display: none;
}
@media (max-width: 850px) {
label.logo {
font-size: 30px;
padding-left: 50px;
}
nav ul li a {
font-size: 16px;
}
}
@media (max-width: 800px) {
.checkbtn {
display: block;
}
ul {
position: fixed;
width: 100%;
height: 100vh;
background: var(--color2);
left: -100%;
text-align: center;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
nav ul li {
display: block;
margin: 50px 0px;
line-height: 30px;
}
nav ul li a {
font-size: 20px;
}
a:hover,
a.active {
background: none;
color: var(--color1);
}
#check:checked ~ ul {
left: 0px;
}
}
@media (max-width: 300px) {
.checkbtn img {
width: 20px;
height: 20px;
margin-left: 0px;
}
label.logo {
font-size: 30px;
padding-left: 10px;
}
}
/* ******************Navbar CSS End******************* */
- If you want to change the colors of Navbar, just change the color in the (:root) variable.
- If you want to change the color of the toggle icon to black, just uncomment this line (/* filter: invert(1)!important; */).
- You can't create a dropdown menu, if you want to create you have to type your CSS.
0 Comments