Navbar component is important part of website for client because its hold all information about your project or brand like about your brand contact and other details and navbar always sounds good when its responsive so, let's start with HTML code .
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="shortcut icon" href="./assets/Group 11.png" sizes="32x32" type="image/x-icon">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://kit.fontawesome.com/814966721c.js" crossorigin="anonymous"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Personal Portfolio</title>
</head>
<body>
<section id="home">
<header>
<nav class="nav">
<a href="/" class="logo">Portfolio</a>
<div class="hamburger">
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
</div>
<div class="nav__link hide">
<a href="#">home</a>
<a href="#">about</a>
<a href="#">Skills</a>
<a href="#">blog</a>
<a href="#">contact</a>
</div>
</nav>
</header>
<div class="content">
Hey there,
I am Ganesh and Congratulations
you successfully
build navbar component.
</div>
</section>
</body>
</html>
Now we done with HTML part now add CSS with our creativity
@import url('https://fonts.googleapis.com/css2?family=Lobster&family=Pattaya&family=Poppins:wght@200;400;600&family=Roboto&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
background-color: #F8F8FF;
}
a {
text-decoration: none;
color: rgb(45, 182, 175);
font-size: 1.2rem;
font-weight: bold;
text-transform: uppercase;
}
.nav {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 20px;
}
.logo {
font-size: 32px;
color: rgb(5, 5, 116);
padding-left: 20px;
}
.hamburger {
padding-right: 20px;
cursor: pointer;
}
.hamburger .line {
display: block;
width: 40px;
height: 5px;
margin-bottom: 10px;
background-color: black;
}
.nav__link {
position: fixed;
width: 94%;
top: 5rem;
left: 18px;
/* background-color: lightblue; */
}
.nav__link a {
display: block;
text-align: center;
padding: 10px 0;
}
.nav__link a:hover {
border-bottom: 3px solid rgb(36, 145, 196);
border-radius: 7px;
transition: all 0.2s ease;
}
.hide {
display: none;
}
.content{
display: flex;
justify-content: center;
text-align: justify;
align-items: center;
margin-top: 20%;
color: rgb(17, 19, 19);
font-weight: 700;
font-size: 20px;
font-family: poppins,sans-serif;
}
@media screen and (min-width: 600px) {
.nav__link {
display: block;
position: static;
width: auto;
margin-right: 20px;
background: none;
}
.nav__link a {
display: inline-block;
padding: 15px 20px;
}
.hamburger {
display: none;
}
.content{
display: block;
text-align: center;
margin-left: 15px;
}
}
check this code on GitHub
follow me for more content like this and share your suggestions in comment section...!!
Let's conn with me on twitter
Top comments (6)
what actually problem you get its work this side
Hey frank check this reository it will definately help you for creating responsive navbar github.com/dev-ggaurav/responsive-...
I know how to create a responsive NavBar. Just wanted to point out that the code shown here doesn't work that way.....
ok thankyou for checking the code looking forward to fix this...