1 00:00:00,540 --> 00:00:05,370 We can create navigation bar is using Bootstrap is seen in this example. 2 00:00:05,370 --> 00:00:11,000 This nav bar extends from one end of the browser's content area to the other on large screens. 3 00:00:13,740 --> 00:00:20,140 When viewed on smaller screens the navigation bar stacks the links one on top of the other 4 00:00:25,060 --> 00:00:33,080 so is navigation bar is fully responsive this navigation bar was developed by creating a math element 5 00:00:33,830 --> 00:00:41,150 and assigning the class nav bar and not by default the nav bar default class allows us this style the 6 00:00:41,150 --> 00:00:46,390 bar will try different styles later in this lesson. 7 00:00:46,520 --> 00:00:54,240 Next we create a container that will contain the nav bar in all its elements after our container div 8 00:00:54,690 --> 00:01:00,830 we create another div with the class nav bar header inside this div. 9 00:01:00,950 --> 00:01:10,550 We have our header my website inside an eight element with the class nav bar brand. 10 00:01:10,630 --> 00:01:19,120 We also have attached a link using the H RDF attribute and we've assigned an empty link. 11 00:01:19,170 --> 00:01:21,270 This represented by the. 12 00:01:21,320 --> 00:01:22,160 The pound sign here 13 00:01:25,770 --> 00:01:34,650 we define our not bar links using an unordered list with the class set to NAV and nav bar dash nuff 14 00:01:36,720 --> 00:01:43,650 the UL element contains for list items in this case one for each link seen on the bar. 15 00:01:43,930 --> 00:01:53,520 As you can see we've assigned a class to the first list item and set it to active. 16 00:01:53,620 --> 00:01:56,170 That's what creates the highlight effect on link 1 17 00:02:01,210 --> 00:02:02,740 after the NAV tags 18 00:02:07,100 --> 00:02:10,430 we've created a container that contains our page content 19 00:02:13,330 --> 00:02:19,510 we're currently using a fixed width for both in nav bar container and the content container. 20 00:02:21,470 --> 00:02:28,550 And that's represented by the div class equals content container attribute here and also over here we 21 00:02:28,550 --> 00:02:39,420 can change both to a fluid container by changing the container class to container fluid on both elements. 22 00:02:39,440 --> 00:02:46,340 So now we can see that the content and the nav bar stretch or span across the entire browser's content 23 00:02:46,370 --> 00:02:46,830 area. 24 00:02:49,400 --> 00:02:59,490 We'll go back to the fixed with container we can also change the style of the knife bar by changing 25 00:02:59,490 --> 00:02:59,900 the net. 26 00:02:59,940 --> 00:03:03,630 Our default class to nav bar inverse 27 00:03:08,940 --> 00:03:16,130 and you can see that this inverts the colors of the Navarre. 28 00:03:16,170 --> 00:03:25,750 We've also added right aligned nav bar items and this was done by creating a well element you can see 29 00:03:25,750 --> 00:03:34,220 that this well code blog represents link one to link four. 30 00:03:34,450 --> 00:03:41,950 Shortly after that we have another element in this euro element has the class nav nav bar in that bar 31 00:03:41,950 --> 00:03:44,470 right the nav bar right. 32 00:03:44,470 --> 00:03:54,260 Class is what right aligns these two items here and these two items are represented by these list by 33 00:03:54,260 --> 00:03:56,390 these two list elements. 34 00:03:56,390 --> 00:04:07,040 Each list element has a link attribute within each RDF tag we've set it to an empty link for now. 35 00:04:07,300 --> 00:04:17,940 We've also included a span tag and we've set that class to glyphs on gift on START empty. 36 00:04:17,950 --> 00:04:19,930 That's what gives us the star icon. 37 00:04:19,930 --> 00:04:26,310 As you learned in earlier lessons and for the second list item we've set it to graphic on search. 38 00:04:26,310 --> 00:04:34,600 And that's why we have the magnifying glass next to our link to our labels are right here if we wanted 39 00:04:34,600 --> 00:04:42,060 to change them we could just update the text here we can give our NAV bar a fixed position both top 40 00:04:42,090 --> 00:04:46,200 or bottom so it doesn't school with the rest of the content on the page. 41 00:04:46,680 --> 00:04:54,260 And to do that it's fairly simple we just add the class nav bar fixed top or nav bar fixed. 42 00:04:54,260 --> 00:04:59,350 Bottom to the NAV element right here 43 00:05:02,380 --> 00:05:14,140 so if we go ahead and set it to that bar fixed bottom and save and refresh you can see that it is now 44 00:05:14,890 --> 00:05:19,080 at the bottom of the page and that's fake. 45 00:05:19,080 --> 00:05:22,880 So it will not school with the rest of the content on the page. 46 00:05:23,270 --> 00:05:29,900 And if you wanted to add that at the top just replace the word bottom with top and now it will remain 47 00:05:29,900 --> 00:05:31,940 fixed at the top. 48 00:05:31,940 --> 00:05:33,890 It will not scroll with the rest of the content 49 00:05:37,870 --> 00:05:44,350 we can add a drop down menu to any of our net bar buttons by adding the drop down menu code block where 50 00:05:44,350 --> 00:05:55,790 we want the menu to appear so I'll go ahead and I'll paste in the code block by now we should be familiar 51 00:05:55,790 --> 00:05:58,150 with creating dropdown menus. 52 00:05:58,250 --> 00:06:08,320 It's the same idea we worked with it in the past so I'll create the drop down menu before our link one 53 00:06:08,500 --> 00:06:08,830 button 54 00:06:11,670 --> 00:06:13,000 and just adjust the formatting 55 00:06:15,980 --> 00:06:21,760 saved the file so there's our menu button now with our drop down menu.