PUBLISHED ON: AUGUST 9, 2021
How to fix navbar on the top of the webpage in Bootstrap 5?
Bootstrap Navbar provides attractive headers to the website pages. It is used for styling the website's name and navigating the drop-down menus. Navbar is generally placed at the top of the web page. These are responsive in nature.
The navbar is not fixed to the top by default but we can do it by using some CSS properties. So, let's started.
Default navbar
The default navbar provided by Bootstrap 5 is placed at the top of the navbar but it does not have any fixed position. Here, we have created the navbar using Bootstrap 5 which illustrates that the default navbar does not have any fixed position.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script></head>
<body>
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Course</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
</div>
</nav>
<h2> SCROLL </h2>
<h2> SCROLL </h2>
<h2> SCROLL </h2>
<h2> SCROLL </h2>
<h2> SCROLL </h2>
<h2> SCROLL </h2>
<h2> SCROLL </h2>
<h2> SCROLL </h2>
<h2> SCROLL </h2>
<h2> SCROLL </h2>
<h2> SCROLL </h2>
<h2> SCROLL </h2>
<h2> SCROLL </h2>
<h2> SCROLL </h2>
<h2> SCROLL </h2>
<h2> SCROLL </h2>
<h2> SCROLL </h2>
<h2> SCROLL </h2>
</body>
</html>
Output
Here is the output of the above program. The navbar is not fixed at the top of the page.
Fixing the navbar to the top of the page using Bootstrap 5
The position utilities are used to place the navbar to the non-static position. Fixed navbar uses position: fixed for fixing the position with some custom CSS so that it does not overlap with other components. Use .fixed-top utility within the .navbar class to fix the navbar to the top of the webpage.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script></head>
<body>
<nav class="navbar fixed-top navbar-expand-sm navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Course</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
</div>
</nav>
<h2> SCROLL </h2>
<h2> SCROLL </h2>
<h2> SCROLL </h2>
<h2> SCROLL </h2>
<h2> SCROLL </h2>
<h2> SCROLL </h2>
<h2> SCROLL </h2>
<h2> SCROLL </h2>
<h2> SCROLL </h2>
<h2> SCROLL </h2>
<h2> SCROLL </h2>
<h2> SCROLL </h2>
<h2> SCROLL </h2>
<h2> SCROLL </h2>
<h2> SCROLL </h2>
<h2> SCROLL </h2>
<h2> SCROLL </h2>
<h2> SCROLL </h2>
</body>
</html>
Output
Here is the output of the above program. As you can see the navbar is fixed at the top.
Conclusion
See we can easily fix the navigation to the top of the webpage in Bootstrap 5. Use the position utility class to fix the navbar to the top of the page. So use Bootstrap 5 to create and fix the navbar in a simple and faster way.
