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:

There are two parts to it:

• The branding area
• The nav links

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:

Click the hamburger icon to see the 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>

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…

2. <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:

12. <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:

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.     <li class="nav-item">
18.         <a class="nav-link" href="membership.html">Membership</a>
19.     </li>
20. </ul>

Dropdowns

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

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

Summary