Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
There are enough menu items at the top of the page, that the navigation menu breaks down on smaller screens like those on a mobile phone. It'd look better in the menu collapsed neatly when it's at mobile sizes. That way, we can add more menu items in the future without fear of cluttering up the navigation.
Resources
- Bootstrap: Navbar - This section of the Bootstrap documentation details the navbar component, which can be used to create a row of links and a responsive menu that collapses into a button.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
On the left side of
Bootstrap 4's documentation,
0:00
there is a list of components.
0:03
And one of those components
is the Navbar component,
0:05
which you can find a link to in
the notes associated with this video.
0:09
A navbar can hold something like a logo
and navigation, just like we already have.
0:13
But it can also hold other features,
like a collapsible responsive menu,
0:20
and the ability to be fixed to
the top of the page while you scroll.
0:26
This is a more robust solution that
can also include things like forms and
0:31
search boxes.
0:35
We won't need all of those features, but
0:36
it's nice to have in case
we want them down the road.
0:38
So, let's use some of these
navbar classes on our site.
0:41
So I'm going to switch back to Workspaces,
and
0:48
we're going to modify
our header quite a bit.
0:52
So I'm going to type this out and
then explain it.
0:55
So first, in the header,
we're going to change out
0:59
all of the classes, and
the first class will be navbar.
1:03
The next one is navbar-expand-md,
md is for medium.
1:08
So the navbar will be
expanded at medium sizes, and
1:15
then at smaller sizes it
will collapse into a button.
1:19
Then, we're going to add
the class navbar-dark and
1:22
then, bg, or background, -dark.
1:28
And together these two classes
will make the navbar dark.
1:31
And then it will tell the navbar that
it's dark and so it will use light text.
1:35
Next, let's modify the h1
1:41
with the class navbar-brand.
1:46
Then on the nav element,
we'll add a few classes there.
1:52
First one is collapse and
then navbar-collapse and
1:57
justify-content-end.
2:04
And then we're going to add an id,
which will be used for our button later.
2:07
And the id will be navbarPrimary.
2:13
And then on the unordered list,
2:19
we're going to change this
list from nav to navbar-nav.
2:22
And the remaining classes
can stay the same.
2:27
But on the second list item, let's add
the class active to the list item.
2:30
And this will select the Artists link, so
2:38
that it looks like that's the part of
the website that we're navigated to,
2:43
because we're looking at
an artist's profile page.
2:46
So let's save that and review.
2:50
First, we removed all of our flex
box classes on the header and
2:55
replaced them with navbar classes,
which also act as a flex box container.
3:01
So we don't need those
redundant flex box classes.
3:07
This creates the navbar and
makes it toggleable through a menu.
3:10
And it also sets the navbar to have
a dark background with light text.
3:17
And that will help separate
the navigation from the rest of the page.
3:22
Then we added a navbar-brand
class to the h1 element,
3:27
which can be used for
a logo later on, if we want.
3:33
Finally, we added the collapse and
3:37
navbar-collapse classes to the navbar,
which will collapse it.
3:39
We also added
the justify-content-end class,
3:45
which will move these
links over to the right,
3:49
rather than having them
right next to the h1.
3:53
So, let's preview this page and
see how it looks.
3:59
And so far so good, but if we resize this,
4:05
the links will disappear and reappear.
4:11
So after that medium breakpoint,
we don't have a button there.
4:15
We want to instead collapse
our nav into a button
4:22
that reveals the navigation
links in a list.
4:26
So, following the example in the Bootstrap
documentation, let's do just that.
4:30
So I'll go back to our Workspace here.
4:36
And just after the h1, actually
4:39
this nav doesn't need to be indented, so
let's bring that back closer to the h1.
4:44
So just after the h1,
we'll add a button here.
4:50
And we'll give it
the class navbar-toggler.
4:57
We'll give it the type
attribute of button.
5:06
We're going to add the attribute
data-toggle, collapse,
5:12
and this will make it interactive, so it
actually expands and collapses the menu.
5:20
And then we need to give it a target.
5:27
So the data-target,
as you may have guessed,
5:30
is the id we used earlier.
5:36
So we're saying that this button
is targeting this navigation menu,
5:39
so there's no confusion.
5:44
So let's just grab that id and paste it
there to make sure it's exactly the same.
5:46
And then inside of this button we're going
5:55
to add a span with the class
navbar-toggler-icon.
6:00
And that will add in the hamburger
menu icon that we know and love.
6:09
Now, if we save this, switch over
to the browser and refresh again.
6:16
You can see that the button appears
at these smaller sizes, and
6:24
changes into navigation at larger sizes.
6:28
And if we click on the button,
Nothing happens,
6:33
and that's because in our data-target
we actually need a hash or
6:38
pound sign just before navbarPrimary.
6:44
So let's save that,
refresh, and try this again.
6:48
And now, our nav menu expands and
collapses just like we would expect it to.
6:55
Finally, we should space
this navbar out just a bit,
7:02
similar to how our navigation
was spaced out previously.
7:06
So that it's away from the content and
away from the top of the page.
7:10
So in our CSS, We
7:16
still have padding on the header element,
7:21
and it should instead
be changed to margin.
7:26
So we'll save that and
if we switch back, and refresh again,
7:32
you can see that it spaced
back out appropriately.
7:37
We could keep iterating on this, but for
7:40
now the basic functionality is there,
and it looks pretty good.
7:44
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up