Responsive Menus

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