Bootstrap navbars

The story so far

Basic navbar

Our standard template has a simple navbar, with two links. How does the navbar work?

Check out the fish club site. On a screen 768 pixels or wider, it looks like this:

Navbar

There are two parts to it:

  • The branding area
  • The nav links

Navbar parts

Click on the branding, and you jump to the home page. Click on the nav links to go to the various pages.

On a small screen, like a phone, the navbar looks like this:

Small screen

Click the hamburger icon to see the links:

Show links

Part of Bootstrap's magic is that the browser changes the menu automatically, based on screen size. You don't have to do anything to get this feature. Woohoo!

Basic navbar code

Here's the code for the navbar. It goes in include/navbar.html:

  1. <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
  2.     <a class="navbar-brand" href="index.html">Fish Club</a>
  3.     <button class="navbar-toggler" type="button"
  4.         data-toggle="collapse" data-target="#navbarSupportedContent"
  5.         aria-controls="navbarSupportedContent" aria-expanded="false"
  6.         aria-label="Toggle navigation">
  7.         <span class="navbar-toggler-icon"></span>
  8.     </button>
  9.     <div class="collapse navbar-collapse" id="navbarSupportedContent">
  10.         <ul class="navbar-nav">
  11.             <li class="nav-item">
  12.                 <a class="nav-link" href="activities.html">Activities</a>
  13.             </li>
  14.             <li class="nav-item">
  15.                 <a class="nav-link" href="location.html">Location</a>
  16.             </li>
  17.         </ul>
  18.     </div>
  19. </nav>
Most of this, you don't need to mess with. Here are things you want to change:

  1. <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
  2.     <a class="navbar-brand" href="index.html"> Fish Club </a>
  3.     <button class="navbar-toggler" type="button"
  4.         data-toggle="collapse" data-target="#navbarSupportedContent"
  5.         aria-controls="navbarSupportedContent" aria-expanded="false"
  6.         aria-label="Toggle navigation">
  7.         <span class="navbar-toggler-icon"></span>
  8.     </button>
  9.     <div class="collapse navbar-collapse" id="navbarSupportedContent">
  10.         <ul class="navbar-nav">
  11.             <li class="nav-item">
  12.                 <a class="nav-link" href="activities.html"> Activities </a>
  13.             </li>
  14.             <li class="nav-item">
  15.                 <a class="nav-link" href="location.html"> Location </a>
  16.             </li>
  17.         </ul>
  18.     </div>
  19. </nav>

Georgina
Georgina
Wait, that's it? That's all you change?
I know, right? You'll see how to add some other things later, like a dropdown, but it's extra. For a basic navbar, that's all you change.

Here…

  1. <a class="navbar-brand" href="index.html"> Fish Club </a>
… you change the name of your site. You could change the home page's URL from index.html, but you probably won't.

Here's how you change a nav link:

  1. <a class="nav-link" href="activities.html"> Activities </a>
You change the text of the link from Activities to something else, and the URL from activities.html to something else.

Let's say you wanted to add a page on membership. Your nav links would be:

  1. <ul class="navbar-nav">
  2.     <li class="nav-item">
  3.         <a class="nav-link" href="activities.html">Activities</a>
  4.     </li>
  5.     <li class="nav-item">
  6.         <a class="nav-link" href="location.html">Location</a>
  7.     </li>
  8.     <li class="nav-item">
  9.         <a class="nav-link" href="membership.html">Membership</a>
  10.     </li>
  11. </ul>

Dropdowns

Here's the Dog club site. It has a dropdown menu:

Dropdown

Here's the new code, with important stuff marked:

  1. <ul class="navbar-nav">
  2.     <li class="nav-item">
  3.         <a class="nav-link" href="activities.html">Activities</a>
  4.     </li>
  5.     <li class="nav-item dropdown">
  6.         <a class="nav-link dropdown-toggle" data-toggle="dropdown"
  7.           href="#" role="button" aria-haspopup="true"
  8.           aria-expanded="false"> Members </a>
  9.         <div class="dropdown-menu">
  10.             <a class="dropdown-item" href="renata.html"> Renata </a>
  11.             <a class="dropdown-item" href="rosie.html"> Rosie </a>
  12.         </div>
  13.     <li class="nav-item">
  14.         <a class="nav-link" href="location.html">Location</a>
  15.     </li>
  16. </ul>

Variations

Logo

Here's the site branding you've seen so far:

<a class="navbar-brand" href="index.html">Fish Club</a>

To add a logo before the site name, add an <img> tag:

<a class="navbar-brand" href="index.html"><img src="logo.png" alt="Logo">Fish Club</a>

To replace the site name with a logo:

<a class="navbar-brand" href="index.html"><img src="logo.png" alt="Logo"></a>

Link color

Some people think the standard Bootstrap nav links are too dark. In fact, I made them lighter on the all the examples on this page. How? I added this to the project's CSS file.

  1. /*
  2.   Navbar links on a dark navbar.
  3.   The last value is the transparency, from 0 (fully trans) to 1 (not trans).
  4. */
  5. .navbar-dark .navbar-nav .nav-link {
  6.     color: rgba(255,255,255,0.9);
  7. }
(This is part of our standard template already. You don't need to add it.)

Line 6 has this:

rgba(255,255,255,0.9)

It defines the color of the links. The deets don't matter, except for the last value. It sets the transparency of the link. The values can be from 0 (fully transparent) to 1 (fully opaque). I used 0.9, which means the link is just a little opaque.

Experiment with values on your site. Use whatever looks good to you.

Other changes

You can push the navbar to the right of the page. You can change the color scheme. Lots of other stuff.

For the deets, check out the Bootstrap docs on navs and navbars.

Exercise

Exercise: Club
Make a Bootstrap site for a club, like a bike club, shoe club, integer club, whatever you like.

Include a navbar. Add at least two regular links (like the Activities link in the example), and a dropdown with as least two entries.

Create pages for each of the links.

Submit the URL of your site.

(If you were logged in as a student, you could submit an exercise solution, and get some feedback.)

Summary