Building a Navbar

[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 let's 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 containers 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