1 00:00:05,710 --> 00:00:11,270 It's just we can start to see the things that the doosra is doing everything that we can in so far. 2 00:00:11,660 --> 00:00:14,270 Scary more exciting than just a great bar so far. 3 00:00:14,270 --> 00:00:18,740 So let's go ahead and do something that is going to start to show what some of these classes are doing 4 00:00:18,740 --> 00:00:25,220 here and what I want to do is critique do they open and close that just so I don't forget them and give 5 00:00:25,250 --> 00:00:31,260 us a class of container and this is very common across who strap is create content or space basically 6 00:00:31,310 --> 00:00:32,790 a holding cell. 7 00:00:32,950 --> 00:00:37,340 My information is going to go into homes. 8 00:00:40,580 --> 00:00:44,120 It will get ahead of myself there container. 9 00:00:45,740 --> 00:00:49,890 And then within there we want to create a link because this is going to be our logo. 10 00:00:49,880 --> 00:00:54,170 This is going to be the logos always link back to the home page. 11 00:00:54,290 --> 00:01:02,900 So when we go ahead just make that a trip tag equal some placeholder in there right now that I'm going 12 00:01:02,900 --> 00:01:05,100 to give this one a classic. 13 00:01:05,130 --> 00:01:13,810 And again this is a bootstrap class of the nav bar where you got a lot in here a now our brand. 14 00:01:13,820 --> 00:01:15,830 So it's going to be my logo with the nav bar. 15 00:01:15,950 --> 00:01:22,010 And they could just as easily put an image in here as opposed to putting this text in here Brooke from 16 00:01:22,370 --> 00:01:23,000 this instance. 17 00:01:23,030 --> 00:01:27,220 I'm going to go ahead and just make it text. 18 00:01:27,820 --> 00:01:28,340 Whoops. 19 00:01:28,350 --> 00:01:31,510 Trackballs call that name here. 20 00:01:32,370 --> 00:01:32,670 All right. 21 00:01:32,720 --> 00:01:36,320 So let's go ahead and save that and commom back toward that. 22 00:01:36,360 --> 00:01:42,020 Now I'm going to hit refresh and you can see I've got the nav bar appear just got a little bit taller 23 00:01:42,110 --> 00:01:43,940 to fit my logo. 24 00:01:43,950 --> 00:01:45,920 My little weight on the dark background. 25 00:01:45,920 --> 00:01:55,710 It could just as easily come back and show you background light at refashioning see if it turns white. 26 00:01:55,950 --> 00:02:04,160 If that was the case maybe it might change my bar to be light as well which would make my font turn 27 00:02:04,160 --> 00:02:04,910 dark. 28 00:02:05,150 --> 00:02:09,890 So it's kind of easy to remember if you have a background that is light to go ahead just go ahead and 29 00:02:09,890 --> 00:02:11,900 say nav bar light. 30 00:02:11,900 --> 00:02:13,850 But in this case stick with dark 31 00:02:16,510 --> 00:02:23,800 dash work remembering that bag just makes a little bit easier see as this expands out and does different 32 00:02:23,800 --> 00:02:25,500 things in here. 33 00:02:25,500 --> 00:02:25,800 All right. 34 00:02:25,810 --> 00:02:32,590 So I have added a container here to hold my all my information going across the top here. 35 00:02:32,650 --> 00:02:41,700 Next thing that I want to do it's one and a button and this is going to be my toggle or for the response. 36 00:02:41,760 --> 00:02:47,380 Then one other each HTML5 class ring I call the button there. 37 00:02:47,600 --> 00:02:51,840 And within them button are going to create the class. 38 00:02:52,470 --> 00:02:53,480 All those 39 00:02:56,300 --> 00:03:01,410 that are told you'd see that a lot here you have bar taqueria. 40 00:03:01,420 --> 00:03:06,170 We have to find that now because it's the button we have to give it some other attributes as well. 41 00:03:06,270 --> 00:03:15,780 What say what is this type this is going to be Loeb's equals foughten. 42 00:03:16,050 --> 00:03:17,660 And I have to say data 43 00:03:21,370 --> 00:03:29,180 on equals or telling it to collapse what it needs to to turn into that little hamburger menu that will 44 00:03:29,180 --> 00:03:34,670 expand and I'll say Dedo targeted. 45 00:03:34,740 --> 00:03:39,410 Now this is actually something that we will make up and I'm going to say 46 00:03:42,660 --> 00:03:47,880 we have our product right now of bar responsive. 47 00:03:48,050 --> 00:03:52,510 Now again we have to tell it to target something specific when I click on it. 48 00:03:52,640 --> 00:03:59,570 What is it's going after so going to say when to create this idea as an NAV bar response if I'm up plie 49 00:03:59,600 --> 00:04:07,600 that ID to the area that I want to make it collapse or expand or see here 50 00:04:13,670 --> 00:04:17,320 own controls and calls 51 00:04:20,020 --> 00:04:20,550 are 52 00:04:23,260 --> 00:04:25,550 just like we just typed up their 53 00:04:32,700 --> 00:04:40,790 And we're saying by default we're going to keep that expand the new balls do not expand that by default 54 00:04:40,790 --> 00:04:41,640 here. 55 00:04:45,570 --> 00:04:49,020 And erm what type of label is this. 56 00:04:49,020 --> 00:04:53,540 This is a long time ago navigation. 57 00:04:53,900 --> 00:04:54,920 All right. 58 00:04:54,930 --> 00:04:57,010 So we've got that information there so far. 59 00:04:57,130 --> 00:05:00,590 This is helping build our responsive menu here. 60 00:05:00,720 --> 00:05:05,250 And if it come back to my browser and hit refresh your you can actually see that there is a little button 61 00:05:05,250 --> 00:05:13,440 up there that will be our hamburger mobile navigation right there so in the next video we're in a command 62 00:05:13,470 --> 00:05:18,630 or an ad the actual links in there and you'll see the difference between what to look like on desktop 63 00:05:18,720 --> 00:05:20,180 and how to look Volvo.