Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Building a Navbar

9:17 with Guil Hernandez

Bootstrap simplifies many complex or time-consuming tasks like building navigations, from controls, drop down menus and more. In this video, we'll continue building the Full Stack Conf site using Bootstrap's UI components, starting with the navbar.

Teacher's Notes
Questions?
Video Transcript
Downloads
Workspaces

Code snippet

    <!-- navbar -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary fixed-top">
      <div class="container">
        <a class="navbar-brand order-1 mr-0" href="https://www.teamtreehouse.com" target="_blank">Presented by Treehouse</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
          <div class="navbar-nav">
            <a class="nav-item nav-link" href="#home">Home <span class="sr-only">(current)</span></a>
            <a class="nav-item nav-link" href="#about">About</a>
            <a class="nav-item nav-link" href="#speakers">Speakers</a>
            <a class="nav-item nav-link" href="#schedule">Schedule</a>
          </div>
        </div>
      </div>
    </nav><!-- /navbar -->

Resources

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

[MUSIC] 0:00

Bootstrap simplifies many complex or time consuming tasks like building navigation 0:04

systems, form controls, drop down menus, and more. 0:09

For example, interactive components like drop down, alert, 0:12

and modal windows require JavaScript to work. 0:16

But Bootstrap lets you quickly create an interactive component 0:20

by simply giving an element a class, ID, or data attribute. 0:23

You don't have to write any JavaScript, because Bootstrap already provides it. 0:27

In the last section of this course, 0:30

you saw how Bootstrap greatly simplifies page layout. 0:33

CSS layout can be tricky, and 0:37

creating your own CSS grid system is time consuming. 0:38

So Bootstrap's predefined classes and grid let you focus on the higher level parts of 0:41

your project, instead of worrying about small, 0:46

repetitive tests like calculating column widths, loads, and writing media queries. 0:48

Bootstrap components let us create interactive components just as easily. 0:53

So coming up in this section, we'll press on and build out the rest of 0:57

the Full Stack Conf site using some of Bootstrap's UI components. 1:01

So let's start with a nav bar. 1:05

Click the Components link to view all the available components. 1:08

Now a good way to start using any of these components is to copy their code snippets 1:13

from the Bootstrap docs, paste them into your project, 1:16

then make changes to the HTML and CSS to customize the components. 1:19

So as you're building the site, feel free to experiment with other components to 1:23

explore the capabilities of Bootstrap. 1:27

There's one key component missing from our website, the navigation. 1:30

So let's quickly build a navigation that looks like the one in the mock-up. 1:34

Back in index.html, below the opening body tag, 1:38

I'll write a set of HTML comments for my navbar. 1:43

I want the navigation to stretch from edge to edge of the browser window. 1:48

So I'll create the navbar outside of the container, that way the navigation isn't 1:53

constrained by the position and width of the container div. 1:57

So Bootstrap comes with lots of easily customizable navigation components, 2:02

that are built using Flexbox. 2:07

For instance, you can quickly add a basic navigation to your site, 2:09

using the base nav component snippet. 2:14

So I'll copy this snippet, and paste it between my navbar comments 2:17

Then you have the option to align the nav horizontally or vertically. 2:26

Or you can quickly generate a tabbed navigation by simply 2:33

adding the class nav-tabs 2:37

You can even display pill shaped navigation links, like this, 2:49

using the class nav-pills. 2:54

Now the website mock-up shows that we should create a navigation bar containing 3:02

the navigation links on the left side, and 3:07

a link to the organizer's website on the right side. 3:09

Bootstrap has the perfect component for this, Navbar. 3:13

Navbar is a wrapper for positioning navigation, branding, and 3:19

other elements into a navigation header. 3:23

As you can see, you can even include a search field in the navbar. 3:26

So I'm going to use this nav snippet, which is similar to the regular nav we 3:30

have now, except you can use different color schemes and 3:35

it's easier to position the navigation menu. 3:38

It even collapses the navigation in the extra small to medium breakpoint range, 3:41

and displays a navbar-toggle icon to open the nav menu. 3:47

So I'll use one of these nav snippets provided here to build my navbar. 3:51

And the first one uses an unordered list to lay out the nav links. 3:56

And the second snippet works and looks exactly the same way, except that it 4:02

doesn't use a list based approach, instead it uses a div with nested anchor elements. 4:06

So I'll copy this second snippet and 4:12

replace the nav component that's in the HTML file. 4:14

Next I'll change the links to match the content in our site. 4:26

So for the home link, I'll make the href attribute #home, 4:29

then I'll replace Features with About and set its href to #about. 4:36

Below that we'll set this link to Speakers. 4:43

And the final link will be the link to the Schedule. 4:50

And we don't need the active and disabled classes. 4:58

So let's remove the active class from the Home link and 5:01

the disabled class from the Schedule link. 5:05

So let's have a look. 5:09

If you resize the browser, 5:13

you'll see that the navbar provides proper responsive styling out of the box. 5:15

So in the medium breakpoint range, the navigation links collapse and we're 5:20

presented with the toggle menu, which you can click to show and hide the nav links. 5:24

Bootstrap provides the class navbar-brand as a class you can use for 5:32

your company, product, or project name. 5:37

So I'll update the navbar-brand's href attribute with the link to Treehouse. 5:40

You can copy these exact snippets from the teacher's notes of this video. 5:48

And I'll change the text to Presented by Treehouse. 5:55

Let’s also add target_blank so the link opens in a new tab or window. 6:02

So now I want to display the Presented by Treehouse link to the right of 6:13

the navigation links so that it’s flush with the right edge of the nav. 6:17

Well, since the nav uses Flexbox, 6:22

I can take advantage of the order classes to control the visual order of the link. 6:24

So giving the navbar-brand link the class order-1, 6:28

shifts the links to the right of the navigation links. 6:36

The default navbar's text color is gray, against a light gray background, but 6:41

I'd like a brighter background color. 6:46

Well, changing the colors in the navbar is easy with the navbar theming classes and 6:47

background color utilities. 6:52

I like the white navigation links against the dark blue background shown here. 6:54

So to apply this color scheme to my Navbar, 6:59

I'll copy the navbar-dark and bg-primary classes from the snippet and 7:02

replace navbar-light and bg-light with these new classes. 7:08

And that looks a lot better. 7:16

So now the content inside the navbar 7:18

should be aligned with the rest of the page. 7:21

Meaning, the content's left and right margins should line up with the left and 7:23

right margins of the container below as we see here in the mock-up. 7:29

Well, the container's width is constrained and 7:33

doesn't stretch to fill the full width of the page. 7:36

Again, because I want the navbar component to stretch across the entire width 7:38

of the browser window, I placed it outside the container. 7:43

So to align the Navigation menu and Treehouse link with the rest of the page, 7:48

I can simply wrap the Navbar content in a container. 7:52

So back in my code, right below the opening nav tag, 7:57

I'll add a div with a class container and 8:02

place the closing div tag just above the closing nav tag. 8:05

And now our navigation links are centered on the page, good. 8:17

Next to make the Presented by Treehouse link perfectly 8:21

flush with the right edge of the navbar, 8:26

I'll use the merge in utility class mr-0, or margin right 0, 8:30

to remove its right margin and that looks better. 8:35

Finally, let's make this a fixed navbar, so 8:40

users never lose sight of the navigation. 8:43

It will always stay at the top of the page. 8:45

Well, Bootstrap makes it easy to fix a navbar to the top or 8:48

bottom of the viewport. 8:52

For example, you can give the navbar component the class fixed-top. 8:53

And it will stick to the top of the browser. 9:03

So now when I scroll down the page, the navbar remains fixed in one spot. 9:05

Now if you notice that the fixed positioning of the navbar covers up parts 9:10

of the headings, don't worry. 9:13

We'll fix this in the next video. 9:15

You need to sign up for Treehouse in order to download course files.

Sign up

You need to sign up for Treehouse in order to set up Workspace

Sign up