menu

ICC565

Bootstrap

4.7 Navbars

Contents

Overview

To build a navigation bar, try starting with one of the examples from Bootstrap.

There are many options for navbars. Refer to the documentation for the code.

Follow these steps to get a navbar onto your page:

  1. Copy a pre-made Bootstrap navbar
  2. Remove what you don’t need
  3. Add in your links
  4. Set the active link (if necessary - and remove the disabled link)
  5. Customize the expanded version
  6. Customize the mobile version

Navbars have a lot of classes. Here are some common ones you might use:



    .navbar{ (for the bar height)
    .bg-dark{ (for the bar color – might need !important)
    .navbar-brand{ (for your company name - might need !important)
    .navbar-dark .navbar-nav .nav-link{ (link color)
    .navbar-dark .navbar-nav .active>.nav-link{ (active link color)
    .navbar-dark .navbar-nav .nav-link:hover{ (hover link color)

Note: You can use .navbar to change the color too, but that will require !important. And if you change the height of the navbar, use min-height.

The classes above are for the inverse style navigation (light text on dark background). If you use the lighter navbar style, they will start with .navbar-light.

You can also control the size at which your navbar expands (using the display sizes from Section 4.5). If you always want a hamburger menu instead of a navbar, just remove the navbar-expand class from your HTML code.

View Source & Inspect

To figure out which classes to customize, use the Inspect function in Chrome. Control-click the thing on the page and select "Inspect" from the menu. The panel will show you what CSS is being applied to the element you click and which classes are used.

You can also use the View Source function to view the HTML and CSS for any website you visit.