Bootstrap 5 Navbar Placement

A navigation bar is used in every website to make it more user-friendly so that the navigation through the website becomes easy and the user can directly search for the topic of their interest.

Navbar Placement is used to set the position of the navbar. We can use position utilities for the placement of the Navbar like fixed-top, fixed-bottom or sticky-top, etc.

Navbar Placement used Classes:

• fixed-top: This class is used for the fixed position of the navbar to the top.
• fixed-bottom: This class is used for the fixed position of the navbar to the bottom.
• sticky-top: This class is used to set the position of the navbar to the sticky top.
• sticky-bottom: This class is used to set the position of the navbar to the sticky bottom.

 

Syntax:

<nav class="navbar fixed-*">
 <div>
 <a class="navbar-brand" href="#">
 ...
 </a>
 ...
 </div>
</nav>

Note: We can substitute this * with top or bottom as per requirement

Example 1: In this example, we will learn about Navbar placement at a fixed-top and place the navbar at the top.

Output:

👁 Image

Example 2: In this example, we will learn about Navbar placement at the fixed-bottom and place navbar at the bottom.

Output:

👁 Image

References: https://getbootstrap.com/docs/5.0/components/navbar/#placement