 |
| Responsive Navbar using html and css |
In this article, we given a Responsive Navbar using html and css as a project. Responsive Navbar is used for a website which is created using html and css. In this project, we created a reponsive navbar which is responsive means when we switches the screen then it automatically fits the screen with a perfect look for better user experience.
So, Must try this project for practice and use in vs code to check how it works. We have given a complete source code of Responsive Navbar using html and css. Let's go and check the source code as given below -
To add this project in vs code, follow the given process :-
1) Create a New folder in file manager name as - Responsive-Navbar.
2) Open the folder in VS code.
3) Add file name as - index.html and copy the html code as given.
4) Add another file name as - style.css and copy the css code as given.
5) Then run the code or check the preview with code preview extension in vs code.
Responsive Navbar using html css source code
Here we given a html and css source code of Responsive Navbar project as given -
HTML
In html code, we linked css file for styling. we added <nav> tag with list tags to add the navbar items in <div> tag. Copy the given html code and paste it into index.html file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Navbar</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="nav">
<input type="checkbox" id="nav-check">
<div class="nav-header">
</div>
<div class="nav-btn">
<label for="nav-check">
<span></span>
<span></span>
<span></span>
</label>
</div>
<div class="nav-links">
<a href="#">Home</a>
<a href="#">About us</a>
<a href="#">Contact us</a>
<a href="#">Login</a>
</div>
</div>
</body>
</html>CSS
In css code, we added a color, postion and background color for a styling. Also, added a responsive design to make the better look of the navbar for all screens like mobile and desktop. Copy the given css code and paste it into style.css file.
* {
box-sizing: border-box;
}
body {
margin: 0px;
font-family: 'segoe ui';
}
.nav {
height: 50px;
width: 100%;
background-color: #0077ff;
position: relative;
}
.nav>.nav-header {
display: inline;
}
.nav>.nav-header>.nav-title {
display: inline-block;
font-size: 22px;
color: #fff;
padding: 10px 10px 10px 10px;
}
.nav>.nav-btn {
display: none;
}
.nav>.nav-links {
display: inline;
float: right;
font-size: 18px;
}
.nav>.nav-links>a {
display: inline-block;
padding: 13px 10px 13px 10px;
text-decoration: none;
color: #efefef;
}
.nav>.nav-links>a:hover {
background-color: rgb(39, 158, 255);
}
.nav>#nav-check {
display: none;
}
@media (max-width:600px) {
.nav>.nav-btn {
display: inline-block;
position: absolute;
right: 0px;
top: 0px;
}
.nav>.nav-btn>label {
display: inline-block;
width: 50px;
height: 50px;
padding: 13px;
}
.nav>.nav-btn>label:hover,
.nav #nav-check:checked~.nav-btn>label {
background-color: rgb(0, 68, 255);
}
.nav>.nav-btn>label>span {
display: block;
width: 25px;
height: 10px;
border-top: 2px solid #eee;
}
.nav>.nav-links {
position: absolute;
display: block;
width: 100%;
background-color: #2154fc;
height: 0px;
transition: all 0.3s ease-in;
overflow-y: hidden;
top: 50px;
left: 0px;
}
.nav>.nav-links>a {
display: block;
width: 100%;
}
.nav>#nav-check:not(:checked)~.nav-links {
height: 0px;
}
.nav>#nav-check:checked~.nav-links {
height: calc(100vh - 50px);
overflow-y: auto;
}
}Output
Check the output of Responsive Navbar project-
Also see this -
Hope this helps you to know about Responsive Navbar using html and css with source code. If you have any confusion or query then you can contact us on our coding community.
Checkout others projects on our website for more and join our coding community on telegram to get knowledge about coding with proper material such as notes, tutorials, projects and more.
Tags:
projects