On the left side of Bootstrap 4's documentation,

there is a list of components.

And one of those components is the Navbar component,

which you can find a link to in the notes associated with this video.

A navbar can hold something like a logo and navigation, just like we already have.

But it can also hold other features, like a collapsible responsive menu,

and the ability to be fixed to the top of the page while you scroll.

This is a more robust solution that can also include things like forms and

search boxes.

We won't need all of those features, but

it's nice to have in case we want them down the road.

So, let's use some of these navbar classes on our site.

So I'm going to switch back to Workspaces, and

we're going to modify our header quite a bit.

So I'm going to type this out and then explain it.

So first, in the header, we're going to change out

all of the classes, and the first class will be navbar.

The next one is navbar-expand-md, md is for medium.

So the navbar will be expanded at medium sizes, and

then at smaller sizes it will collapse into a button.

Then, we're going to add the class navbar-dark and

then, bg, or background, -dark.

And together these two classes will make the navbar dark.

And then it will tell the navbar that it's dark and so it will use light text.

Next, let's modify the h1

with the class navbar-brand.

Then on the nav element, we'll add a few classes there.

First one is collapse and then navbar-collapse and

justify-content-end.

And then we're going to add an id, which will be used for our button later.

And the id will be navbarPrimary.

And then on the unordered list,

we're going to change this list from nav to navbar-nav.

And the remaining classes can stay the same.

But on the second list item, let's add the class active to the list item.

And this will select the Artists link, so

that it looks like that's the part of the website that we're navigated to,

because we're looking at an artist's profile page.

So let's save that and review.

First, we removed all of our flex box classes on the header and

replaced them with navbar classes, which also act as a flex box container.

So we don't need those redundant flex box classes.

This creates the navbar and makes it toggleable through a menu.

And it also sets the navbar to have a dark background with light text.

And that will help separate the navigation from the rest of the page.

Then we added a navbar-brand class to the h1 element,

which can be used for a logo later on, if we want.

Finally, we added the collapse and

navbar-collapse classes to the navbar, which will collapse it.

We also added the justify-content-end class,

which will move these links over to the right,

rather than having them right next to the h1.

So, let's preview this page and see how it looks.

And so far so good, but if we resize this,

the links will disappear and reappear.

So after that medium breakpoint, we don't have a button there.

We want to instead collapse our nav into a button

that reveals the navigation links in a list.

So, following the example in the Bootstrap documentation, let's do just that.

So I'll go back to our Workspace here.

And just after the h1, actually

this nav doesn't need to be indented, so let's bring that back closer to the h1.

So just after the h1, we'll add a button here.

And we'll give it the class navbar-toggler.

We'll give it the type attribute of button.

We're going to add the attribute data-toggle, collapse,

and this will make it interactive, so it actually expands and collapses the menu.

And then we need to give it a target.

So the data-target, as you may have guessed,

is the id we used earlier.

So we're saying that this button is targeting this navigation menu,

so there's no confusion.

So let's just grab that id and paste it there to make sure it's exactly the same.

And then inside of this button we're going

to add a span with the class navbar-toggler-icon.

And that will add in the hamburger menu icon that we know and love.

Now, if we save this, switch over to the browser and refresh again.

You can see that the button appears at these smaller sizes, and

changes into navigation at larger sizes.

And if we click on the button, Nothing happens,

and that's because in our data-target we actually need a hash or

pound sign just before navbarPrimary.

So let's save that, refresh, and try this again.

And now, our nav menu expands and collapses just like we would expect it to.

Finally, we should space this navbar out just a bit,

similar to how our navigation was spaced out previously.

So that it's away from the content and away from the top of the page.

So in our CSS, We

still have padding on the header element,

and it should instead be changed to margin.

So we'll save that and if we switch back, and refresh again,

you can see that it spaced back out appropriately.

We could keep iterating on this, but for

now the basic functionality is there, and it looks pretty good.