Let’s combine our knowledge of collapse, buttons, and the nav component to make a responsive navbar! We often find navbars at the top of websites and we can use a navbar to quickly navigate to useful/important pages on the website.
Below is an example from Bootstrap’s Navbar documentation that we’ve modified:
<nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">Brand Goes Here</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="#">Current Page Link <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">Another Page Link</a> </li> </ul> </div> </nav>
There’s a lot going on, so let’s break it down before we use it in our own code:
- We have a
<nav>
element with multiple classes:"navbar"
makes this<nav>
a Bootstrap navbar."navbar-expand-lg"
renders the<div class="collapse navbar-collapse">
element on large (and extra large screens). The"lg"
portion is called a breakpoint and refers to screen size widths. We can append one of any breakpoint value at the end, i.e."sm"
,"md"
,"lg"
, or"xl"
."navbar-light"
assigns a color scheme to the navbar."bg-light"
assigns a background color to the navbar.
- Inside the
<nav>
is an<a>
with a class of"navbar-brand"
which can be an image or text that represents the brand/logo of the website. - There is a
<button>
that renders when a user’s screen size is smaller than the breakpoint value in"navbar-expand-{breakpoint}"
and toggles the visibility of the navbar menu to save space.- If the user’s screen size matches the breakpoint (or is bigger), then the
<div>
, with the nav component and its links, renders instead of the button.
- If the user’s screen size matches the breakpoint (or is bigger), then the
- The
<ul>
and the nested<li>
make up a nav component. - The first
<li>
has a class of"active"
which highlights the user’s current page.
Instructions
We have some HTML in place for a navbar but we have to add some classes to make it a responsive Bootstrap navbar component.
Use the comments to locate the navbar component. The <nav>
already has two classes for styling. You will have to add two more classes: "navbar"
and "navbar-expand-sm"
.
Under the opening <nav>
tag, add an <a>
element with a class of "navbar-brand"
.
Then copy and paste the following <img>
to nest inside the <a>
element:
<img src="https://content.codecademy.com/courses/learn-bootstrap-components/logo.png" alt="Gloria's Gardening Logo" height="30">
The <button>
and the collapsible <div>
is already included, but we still need to make the <ul>
and accompanying <li>
and <a>
elements into a nav component.
- Assign the
<ul>
a class of"navbar-nav"
- Assign all the
<li>
elements a class of"nav-item"
- Assign all the
<a>
elements a class of"nav-link"
Time to highlight the current page using the "active"
class.
Add the "active"
class to the first <li>
element.
Notice after you add the change and run your code that the "Home"
text has a subtle styling difference compared to the other two links in the navbar.