How to make bootstrap navbar sticky
How to make bootstrap navbar sticky:- To create sticky navbar, you need to use HTML, CSS, and Bootstrap 5. HTML will make the structure of the body, CSS will make it looks good. This kind of sticky navbar looks attractive on website.
You can easily make the navigation bar sticky when the user scrolls down, we will create a basic website structure for the sticky navbar when the user scrolls down the page it will display the effect.
What Is a Sticky Navbar?
You see, in the world of CSS, sticky means something very specific. In fact, there are two settings you use to “sticky” an element to a certain part of the screen while the visitor scrolls.
There’s a big difference between them:-
fixed elements stay in the same position on the viewport, regardless of scrolling.
sticky elements – they stay in the same position on the viewport, regardless of scrolling, but only within their parent element. When the viewport reaches the end of a sticky element’s parent, it will behave like a relatively positioned element.
Use Html:-
<!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" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" />
<title>Sendbox</title>
</head>
<body>
<div class="jumbotron">
<h1 class="display-3 fw-bold text-center py-4">Navbar Sticky</h1>
</div>
<nav class="navbar navbar-expand-lg header navbar-light" >
<div class="container">
<a class="navbar-brand fs-3" href="index.html">DomainMasters</a>
<div class="collapse navbar-collapse primary-menu" id="navbarSupportedContent">
<ul class="navbar-nav m-auto mb-2 mb-lg-0 menu">
<li class="nav-item">
<a class="nav-link active" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Career</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Documentation</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact Us</a>
</li>
</ul>
<a href="#" class="main-btn">Contact</a>
</div>
</div>
</nav>
<div class="lines">
<div class="container">
<div class="row">
<div class="col-lg-12">
<img src="../Downloads/18278525_122854211603130_3619154286900708215_o.jpg" class="img-fluid" alt="image">
</div>
<div class="col-lg-12">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Nulla ipsam error doloribus, eos adipisci aperiam animi enim rem illo modi.
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Nulla ipsam error doloribus, eos adipisci aperiam animi enim rem illo modi.Lorem ipsum dolor sit amet consectetur adipisicing elit.
Nulla ipsam error doloribus, eos adipisci aperiam animi enim rem illo modi.Lorem ipsum dolor sit amet consectetur adipisicing elit.
Nulla ipsam error doloribus, eos adipisci aperiam animi enim rem illo modi.Lorem ipsum dolor sit amet consectetur adipisicing elit.
Nulla ipsam error doloribus, eos adipisci aperiam animi enim rem illo modi.Lorem ipsum dolor sit amet consectetur adipisicing elit.
Nulla ipsam error doloribus, eos adipisci aperiam animi enim rem illo modi.Lorem ipsum dolor sit amet consectetur adipisicing elit.
Nulla ipsam error doloribus, eos adipisci aperiam animi enim rem illo modi.Lorem ipsum dolor sit amet consectetur adipisicing elit.
Nulla ipsam error doloribus, eos adipisci aperiam animi enim rem illo modi.Lorem ipsum dolor sit amet consectetur adipisicing elit.
Nulla ipsam error doloribus, eos adipisci aperiam animi enim rem illo modi.Lorem ipsum dolor sit amet consectetur adipisicing elit.
Nulla ipsam error doloribus, eos adipisci aperiam animi enim rem illo modi.Lorem ipsum dolor sit amet consectetur adipisicing elit.
Nulla ipsam error doloribus, eos adipisci aperiam animi enim rem illo modi.Lorem ipsum dolor sit amet consectetur adipisicing elit.
Nulla ipsam error doloribus, eos adipisci aperiam animi enim rem illo modi.Lorem ipsum dolor sit amet consectetur adipisicing elit.
Nulla ipsam error doloribus, eos adipisci aperiam animi enim rem illo modi.Lorem ipsum dolor sit amet consectetur adipisicing elit.
Nulla ipsam error doloribus, eos adipisci aperiam animi enim rem illo modi.Lorem ipsum dolor sit amet consectetur adipisicing elit.
Nulla ipsam error doloribus, eos adipisci aperiam animi </p>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"
integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</body>
</html>
Use CSS:-
a{
text-decoration: none;
}
.header{
height: 80px;
box-shadow: 0 0 1.25rem rgb(30 34 40 / 15%);
position: sticky;
top: 0;
z-index: 9999;
background-color: #fff;
}
.main-btn{
padding: 10px 25px;
border-radius: 50px;
color: #fff;
font-size: 16px;
font-weight: 600;
transition: .3s;
background-color: #3f78e0;
}
.main-btn:hover {
transform: translateY(-0.15rem);
box-shadow: 0 0.25rem 0.75rem rgb(30 34 40 / 15%);
color: #fff;
}
Previous post
How to make money from photoshop
Next post