How To Pad Fixed Navbar In Bootstrap

How to set navbar on the top of the webpage in Bootstrap 5?

Bootstrap Navbar provides attractive headers to the website pages. Information technology is used for styling the website's name and navigating the drop-downwardly menus. Navbar is generally placed at the top of the web folio. These are responsive in nature.

The navbar is not fixed to the top past default but we tin can do it by using some CSS properties. So, let'due south started.

Default navbar

The default navbar provided by Bootstrap 5 is placed at the meridian of the navbar merely information technology does not have any fixed position. Here, nosotros take created the navbar using Bootstrap five which illustrates that the default navbar does non have whatever stock-still position.

            <!DOCTYPE html> <html lang="en"> <caput>   <title>Bootstrap </title>   <meta charset="utf-viii">   <meta name="viewport" content="width=device-width, initial-scale=ane">   <link href="https://cdn.jsdelivr.net/npm/bootstrap@five.0.i/dist/css/bootstrap.min.css" rel="stylesheet">    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@two.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>   <script src="https://cdn.jsdelivr.net/npm/bootstrap@five.0.ane/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script></head> <body>     	<nav class="navbar navbar-aggrandize-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="simulated" aria-characterization="Toggle navigation"> 		  <bridge class="navbar-toggler-icon"></span> 		</button> 		<div class="collapse navbar-plummet" id="navbarSupportedContent"> 		  <ul class="navbar-nav "> 			<li course="nav-detail"> 			  <a class="nav-link agile" aria-electric current="page" href="#">Home</a> 			</li> 			<li class="nav-item"> 			  <a class="nav-link" href="#">Class</a> 			</li>			 			<li form="nav-item"> 			  <a class="nav-link disabled" href="#" tabindex="-ane" aria-disabled="true">Disabled</a> 			</li> 		  </ul>		   		</div> 	  </div> 	</nav> 	<h2> Curlicue </h2> 	<h2> Whorl </h2> 	<h2> Roll </h2> 	<h2> Scroll </h2> 	<h2> Curl </h2> 	<h2> Curlicue </h2> 	<h2> Curlicue </h2> 	<h2> SCROLL </h2> 	<h2> SCROLL </h2> 	<h2> Whorl </h2> 	<h2> Gyre </h2> 	<h2> Gyre </h2> 	<h2> SCROLL </h2> 	<h2> Ringlet </h2> 	<h2> Roll </h2> 	<h2> SCROLL </h2> 	<h2> SCROLL </h2> 	<h2> Scroll </h2> </body> </html>

Output

Here is the output of the above plan. The navbar is not fixed at the top of the page.

Default navbar

Fixing the navbar to the meridian of the folio using Bootstrap 5

The position utilities are used to identify the navbar to the not-static position. Fixed navbar uses position: stock-still for fixing the position with some custom CSS so that it does not overlap with other components. Utilize .fixed-top utility within the .navbar course to fix the navbar to the top of the webpage.

            <!DOCTYPE html> <html lang="en"> <caput>   <title>Bootstrap </title>   <meta charset="utf-8">   <meta name="viewport" content="width=device-width, initial-scale=1">   <link href="https://cdn.jsdelivr.cyberspace/npm/bootstrap@v.0.1/dist/css/bootstrap.min.css" rel="stylesheet">    <script src="https://cdn.jsdelivr.net/npm/@popperjs/cadre@2.nine.two/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>   <script src="https://cdn.jsdelivr.internet/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="bearding"></script></head> <torso>     	<nav class="navbar stock-still-top navbar-expand-sm navbar-dark bg-dark"> 	  <div class="container-fluid"> 		<a course="navbar-brand" href="#">Navbar</a> 		<button class="navbar-toggler" type="push" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> 		  <bridge course="navbar-toggler-icon"></span> 		</push button> 		<div form="collapse navbar-collapse" id="navbarSupportedContent"> 		  <ul grade="navbar-nav "> 			<li class="nav-item"> 			  <a class="nav-link agile" aria-electric current="page" href="#">Home</a> 			</li> 			<li class="nav-item"> 			  <a class="nav-link" href="#">Form</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> Ringlet </h2> 	<h2> Roll </h2> 	<h2> SCROLL </h2> 	<h2> Coil </h2> 	<h2> Curl </h2> 	<h2> Roll </h2> 	<h2> SCROLL </h2> 	<h2> SCROLL </h2> 	<h2> Curlicue </h2> 	<h2> Curl </h2> 	<h2> SCROLL </h2> 	<h2> Curlicue </h2> 	<h2> Coil </h2> 	<h2> SCROLL </h2> 	<h2> Ringlet </h2> 	<h2> SCROLL </h2> </body> </html>

Output

Here is the output of the above plan. Equally y'all tin come across the navbar is fixed at the top.

fixed navbar

Conclusion

See we can hands ready the navigation to the tiptop of the webpage in Bootstrap 5. Use the position utility class to fix the navbar to the top of the page. And so utilise Bootstrap 5 to create and fix the navbar in a simple and faster way.