Css Sticky Navbar | How To Make A Sticky Navbar Css | Sticky Navbar

Css Sticky Navbar | How To Make A Sticky Navbar Css | Sticky Navbar

Css Sticky Navbar | How To Make A Sticky Navbar Css | Sticky Navbar


Introduction

Hello coders, Welcome to codewithrandom Today we’ll see about the sticky navbar with the help of Cascading Stylesheet(CSS). We will perform this code with the help of HTML and CSS. And see the working of Sticky Navbar.

What is a Sticky Navbar?

A navbar which has fixed position and it stays on the same position while the user interfaces scroll the website. It has a fixed position on the website. There are two types of Sticky Navbar:

Fixed Top Navigation

Fixed Left-Side Navigation  

    

    Fixed Top Navigation

It is a Sticky Header that has a fixed position even the user can see it while scrolling the webpage or website. For example, if you absorb YouTube, it has Fixed Top Navigation while we are suffering.


HTML Code:

 <!DOCTYPE html>  
<html lang="eng">
<head>
<title>Top Fixed</title>
</head>
<body>
<style>
body {margin:0;}
.navbar {
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
}
.navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.navbar a:hover {
background: #ddd;
color: black;
}
.main {
padding: 16px;
margin-top: 30px;
height: 1500px; /* Used in this example to enable scrolling */
}
</style>
</head>
<body>
<div class="navbar">
<a href="#home">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
</div>
<div class="main">
<h1>Fixed Top Menu</h1>
<p>WELCOME TO MUMBAI</p>
<p>WELCOME TO MUMBAI</p>
<p>WELCOME TO MUMBAI</p>
<p>WELCOME TO MUMBAI</p>
<p>WELCOME TO MUMBAI</p>
<p>WELCOME TO MUMBAI</p>
<p>WELCOME TO MUMBAI</p>
<p>WELCOME TO MUMBAI</p>
<p>WELCOME TO MUMBAI</p>
<p>WELCOME TO MUMBAI</p>
<p>WELCOME TO MUMBAI</p>
<p>WELCOME TO MUMBAI</p>
</div>
</body>
</html>

In this HTML code we have defined <style> which defines Internal CSS, then we have style the page with the help of padding, color, background color, text-decoration, text-align, float etc. Then with the help of <div> tag we have defined a class called navbar. In which in anchor tag i.e., <a> we have called href function and in it we have given name as Home, News, Contact etc. After that we have opened another <div> tag and defined main. Given Heading with the help of <h1> and in <p> tag we have copy paste the same sentence so that scrollbar is created and we can see the live demonstration of Sticky Navbar. Closing all the tags, Here is our Final Output.

Final Output:





Fixed Left-Side Navigation

A Navbar which is situated in the left side of the webpage or website. User can quickly jump to another page. For example, Travelling website, YouTube etc.  

HTML CODE:

 <html>  
<html lang="eng">
<head>
<title>Top Fixed</title>
<link rel="stylesheet" href="Style.css">
</head>
<body>
<div class="wrapper d-flex">
<div class="sidebar">
<ul>
<li><a href="#"><i class="fas fa-home"></i>Dashboard</a></li>
<li><a href="#"><i class="fas fa-users"></i>Team</a></li>
<li class="notification1"><a href="#"><i class="fas fa-calendar-week"></i>Calender</a><span class="number1">4</span></li>
<li class="notification2"><a href="#"><i class="far fa-envelope"></i>Documents</a><span class="number2">5</span></li>
</li>
<li><a href="#"><i class="fas fa-signal"></i>Reports</a></li>
</ul>
<p class="myproject px-3">PROJECTS</p>
<ul>
<li><a href="#">Website redesign</a></li>
<li><a href="#">GraphQL API</a></li>
<li><a href="#">Customer migration guides</a></li>
<li><a href="#">Profit sharing program</a></li>
</ul>
<div class="userProfile"> <a href="#"><i class="far fa-user-circle xyz"></i></a>
<p class="username">Harsh Sawant<br><a href="#">View Profile</a></p> <a href="#"><i class="fas fa-cog mnp"></i></a>
</div>
</div>
</div>
</body>
</html>

HTML Code Output:

CSS Code

 * {  
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
text-decoration: none;
font-family: arial
}
body {
background: #eee
}
.wrapper {
position: relative
}
.sidebar {
position: fixed;
width: 250px;
height: 100%;
background: #4527A0;
padding: 10px 0
}
.wrapper .sidebar ul li {
padding: 15px
}
.wrapper .sidebar ul li a {
color: #bdb8d7;
display: block
}
.wrapper .sidebar ul li a .fas {
width: 25px !important
}
.wrapper .sidebar ul li a .far {
width: 25px !important
}
.wrapper .sidebar ul li:hover {
background: #311B92
}
.wrapper .sidebar ul li a:hover {
color: #fff;
text-decoration: none
}
.myproject {
margin-top: 25px;
color: #ffffffa8;
font-size: 14px;
margin-bottom: 0
}
.userProfile {
position: absolute;
bottom: 0;
left: 5%;
display: flex
}
.userProfile a {
width: 20px;
background: #4527A0;
color: #bdb8d7;
text-decoration: none;
font-size: 15px
}
.userProfile a:hover {
color: #fff;
background: #4527A0
}
.userProfile p {
color: #fff;
padding: 0 15px 0 15px
}
.userProfile .xyz,
.mnp {
padding-top: 60%;
line-height: 30px;
font-size: 25px !important
}
.notification1 {
display: flex
}
.notification1 .number1 {
font-size: 15px;
display: block;
padding-left: 100px;
color: #fff
}
.notification2 {
display: flex
}
.notification2 .number2 {
font-size: 15px;
display: block;
padding-left: 85px;
color: #fff
}

Final Output:

Now finally, your fix left-side navigation is ready. You can see that we have seen both type of CSS in this project Internal as well as external.

I Hope you guys find this blog amazing and learned new things from it. If you like it comment on it as it motivates us to bring new blog and some learning material for you guys. If you face and difficulty feel free to reach out.

Written by @Harsh_9

Checkout More

1.how to create multi step form in html

2.how to make a logo for instagram

3.add to cart button html css

Leave a Reply