Creating Navigation Bars in Bootstrap

Refer to the following Bootstrap lesson by Mytour to learn how to create navigation bars in Bootstrap.

Creating Navigation Bars in Bootstrap

1. Creating Simple Navigation Bars in Bootstrap

We can use the navbar component to create responsive headers (headers that adapt to different device screen sizes) for websites or applications.

Additionally, we can also create various variations of navigation bars, such as navigation bars with dropdown menus and search boxes.

Example: The following example illustrates how to create a simple static navigation bar with navigation links:

The output result appears as follows:

Additionally, if desired, we can also use a logo to replace pure text in the navigation bar. However, it is important to manually adjust the logo height to match the navigation bar height as shown in the example below:

The output result appears as follows:

Note: We can use utility classes like .ml-auto, .mr-auto, .justify-content-between, ... to align navigation links, forms, buttons, or text within the navigation bar.

Additionally, we can add dropdown menus and search boxes to the navigation bar as shown in the example below:

The output result appears as follows:

Tip: To create navigation bars not fixed at the top or bottom, place the navigation bar anywhere within the .container, set its width, and website content.

3. Integrating Search Form into Navigation Bar

Search forms are a common component in navigation bars on websites. We can add various form controls and form elements to a navigation bar using the .form-inline class within the form element.

Example: The following example illustrates how to integrate a search form into the navigation bar:

The output result appears as follows:

4. Customizing Navigation Bar Background Color

To customize the background color of the navigation bar, we use the .navbar-light class for light background or .navbar-dark for dark background, then customize the background color using utility classes like .bg-dark, .bg-primary, ... .

Additionally, we can apply the CSS background-color property on the .navbar element to customize the navigation bar theme. Refer to the example below:

The output result is as follows:

5. Creating Fixed Navigation Bar in Bootstrap

Bootstrap also includes mechanisms to create fixed navigation bars at the top or bottom of the viewport, scrolling along with the content on the page.

5.1. Creating Top Fixed Navigation Bar

By applying the utility class .fixed-top to the .navbar element to fix the navigation bar at the top corner of the viewport and not scroll with the page.

Example: The following example illustrates how to create a top fixed navigation bar:

The output result appears as follows:

5.2. Creating Bottom Fixed Navigation Bar

Similarly, we can add the .fixed-bottom class to the .navbar element to fix the navigation bar at the bottom corner of the viewport as shown in the example below:

The output result appears as follows:

5.3. Creating Scrollable Fixed Menu

Additionally, we can also create a fixed navigation bar when scrolling by using the .sticky-top class on the .navbar element as illustrated in the example below:

The output result is as follows:

Tip: Place the content within .navbar fixed within .container or .container-fluid to align and pad it with the remaining content.

Note: Remember to add padding (minimum 70px) to the top or bottom of the body element to prevent content from appearing below the navigation bar while creating a fixed navigation bar at the top or bottom.

Additionally, remember to add custom style sheet after the main Bootstrap CSS file, otherwise the style sheet rules will be overridden by Bootstrap rules.

In this lesson, Mytour has just guided you on how to create a navigation bar in Bootstrap. In the next lesson, Mytour will guide you on how to create Breadcrumb in Bootstrap. Additionally, if you have any questions or need clarification, readers can leave their comments below the article.