WEBVTT 00:00.150 --> 00:02.210 OK we're almost there with no bars. 00:02.370 --> 00:04.310 This is actually going to be quick. 00:04.320 --> 00:09.460 We have one thing to talk about which is positioning are enough enough of the placement. 00:09.570 --> 00:14.310 So what that means is do you want your nav bar at the top or at the bottom. 00:14.310 --> 00:15.130 That's one. 00:15.180 --> 00:20.190 One thing that we could answer but also we want it to stay at the top as you scroll. 00:20.280 --> 00:23.400 You want it to be sticky which I'll show you what that looks like. 00:23.460 --> 00:26.220 This is really all we're going to talk about in this video. 00:26.250 --> 00:32.280 Now this kind is kind of bothers me about the docs that they show you this and you can't tell a difference 00:32.430 --> 00:33.150 at all. 00:33.450 --> 00:35.960 I mean there's there's nothing free to tell. 00:35.970 --> 00:36.550 Really. 00:36.600 --> 00:40.830 They had this tiny little white space to indicate like look this one is fixed to the top. 00:40.830 --> 00:46.860 This one is at the bottom but it gives you no indication of what sticky means for example. 00:46.920 --> 00:51.170 So let me show you I have a new document. 00:51.180 --> 00:52.160 It's empty. 00:52.170 --> 00:55.080 I'm going to start by just copying over one of our tough bars. 00:55.080 --> 00:59.840 It doesn't matter which one you just put them in there or put it in there and save. 01:00.240 --> 01:04.050 And I'll say this one is default Nav.. 01:04.070 --> 01:10.920 All right let's call it default placement and now what I'm going to do is add a bunch of space in here 01:11.060 --> 01:15.900 or a bunch of text so I'm going to do a paragraph with like a thousand characters of Vorm ipsum. 01:16.110 --> 01:23.310 And before I do that I'm going to make a container and then do that inside of it just to give us you 01:23.310 --> 01:25.460 could also give your body a height. 01:25.460 --> 01:26.930 But I'm going to do it this way. 01:27.000 --> 01:30.310 So Lorem 1000 and save. 01:30.330 --> 01:31.040 There we go. 01:31.290 --> 01:31.470 All right. 01:31.470 --> 01:34.940 So this is the way the default behavior if I can finish scrolling. 01:35.310 --> 01:41.640 The default behavior for a nav bar where it starts at the top and then you scroll and you scroll past 01:41.640 --> 01:42.230 it. 01:42.360 --> 01:43.430 It doesn't stay there. 01:43.620 --> 01:49.560 Unfortunately I can't have them all on the document at the same time so I'm going to copy this and then 01:49.560 --> 01:52.300 comment out the first one so it stays there. 01:52.320 --> 01:54.390 So you can see default placement. 01:54.510 --> 02:03.810 But now I'm going to do fixed top fixed top like that and then all we do is add the class fixed dash 02:03.960 --> 02:05.500 top. 02:06.000 --> 02:09.780 And now as I scroll you'll see that it remains at the top. 02:09.780 --> 02:14.700 Now one problem we have with this fixed now is that it does cover our content a bit. 02:14.700 --> 02:19.530 So you would want to give your body not the body you'd want to give the container or your paragraph 02:19.620 --> 02:20.750 some margin. 02:20.880 --> 02:22.810 You have to account for that space. 02:23.180 --> 02:23.480 OK. 02:23.490 --> 02:25.700 So the next one that will do come. 02:25.800 --> 02:27.240 This one out. 02:27.360 --> 02:32.700 We can do the same thing but fix it to the bottom which you can probably figure out what that does already. 02:32.820 --> 02:34.240 I'll just change this though. 02:34.260 --> 02:39.480 Fixed bottom save and now it's at the bottom of our page and it stays there. 02:39.510 --> 02:44.740 Now as we toggle open the drawer it opens upwards instead of downwards. 02:45.060 --> 02:47.030 OK so that's fixed bottom. 02:47.050 --> 02:50.330 And now we have my favorite one. 02:50.430 --> 02:54.470 I don't use this very often but I just like it called sticky top. 02:54.480 --> 03:01.140 The problem with sticky top if I just do a new nav bar I change the brand to be sticky top and I give 03:01.140 --> 03:04.220 it a class of sticky dash top. 03:04.350 --> 03:06.360 You can't really tell that anything is different. 03:06.360 --> 03:16.950 It looks like a fixed top but if I put some space above it let's do a Jumbotron Jumbotron fluid and 03:17.040 --> 03:24.390 the jumbotron and inside of there let's do an H one with class equal to display one. 03:24.420 --> 03:26.830 Let's do Tex Centuri maybe. 03:27.390 --> 03:29.210 And I'll just say scroll down 03:32.350 --> 03:34.670 knockdowns supposed to be a save. 03:35.040 --> 03:35.600 OK. 03:35.850 --> 03:38.540 So we have scroll down Jumbotron to spell this wrong. 03:38.610 --> 03:39.230 Yes I did. 03:39.300 --> 03:40.470 I want that background. 03:40.470 --> 03:40.740 All right. 03:40.770 --> 03:44.160 So now we have some content up top maybe an image or something. 03:44.400 --> 03:49.110 And then as we scroll it it sticks to the top. 03:49.140 --> 03:50.910 So a lot of people like that effect. 03:51.030 --> 03:53.550 You come back and it releases. 03:54.210 --> 03:57.390 So that's really the difference street sticky and fixed. 03:57.450 --> 04:02.800 When you do your stickie you can have space above it and then it catches on the top it sticks. 04:03.120 --> 04:04.520 So I'll leave that one. 04:04.700 --> 04:09.600 The last thing I'll point out is that if you want you can put your nav bar in a container. 04:09.600 --> 04:14.720 Now this only works if you're working with a default or fixed top nav bar. 04:14.730 --> 04:16.380 It's not going to work with the sticky one. 04:16.380 --> 04:22.440 It's not going to work with a fixed bottom but if you put your ear it inside of a container which actually 04:22.440 --> 04:27.730 to demonstrate this I'm just going to go back to an earlier instead of deleting all this. 04:27.780 --> 04:29.470 Let's go to this purple Ackbar. 04:29.550 --> 04:32.390 What I can do where is that starts here. 04:32.460 --> 04:41.430 I can do a container and then put all this content inside of it and now NFR just goes part of the way 04:41.430 --> 04:45.960 across the screen and some people like this sometimes you don't want your never to go all the way across. 04:45.960 --> 04:50.220 It still collapses still looks pretty nice. 04:50.250 --> 04:52.540 I'm not crazy about it but that's an option. 04:52.550 --> 04:58.620 Now one other option is to still have your nav go all the way across and put the container on the inside 04:59.370 --> 05:03.230 so that your content inside of the Nav doesn't go all the way across. 05:03.220 --> 05:04.460 If that makes sense. 05:04.640 --> 05:06.120 So that will look like this. 05:07.820 --> 05:12.560 So you have the knack of going all the way and then your container preventing the content from spreading 05:12.560 --> 05:13.770 out all the way across. 05:13.910 --> 05:18.820 We still get that collapse still looks nice totally up to you if you prefer it that way. 05:18.980 --> 05:20.990 So I'll leave this one like that. 05:20.990 --> 05:22.170 So that's it for now. 05:22.400 --> 05:25.060 I mean there's a lot we have an exercise coming up. 05:25.220 --> 05:29.820 And like I said I always reference ADOX there's a lot of syntax but they're very useful. 05:29.840 --> 05:31.010 They look nice. 05:31.010 --> 05:34.420 They work well and we haven't even changed fonts or colors really. 05:34.430 --> 05:37.130 We've been working with just the default styles. 05:37.430 --> 05:37.940 All right. 05:37.940 --> 05:39.080 Moving on to an exercise.