1
00:00:00,640 --> 00:00:04,030
In the last tutorial we created our navigation bar.

2
00:00:04,180 --> 00:00:13,060
One important thing to note is that when we shrink our web browser the links stack on top of one another.

3
00:00:13,070 --> 00:00:18,410
This causes an issue on very small mobile screens because of the amount of space.

4
00:00:18,590 --> 00:00:20,330
This entire block takes up

5
00:00:24,440 --> 00:00:32,260
a solution is to make the nav bar collapsible on very small screens while adding the necessary code

6
00:00:32,320 --> 00:00:33,470
to show you the result.

7
00:00:33,700 --> 00:00:34,710
And then we can go over

8
00:00:43,700 --> 00:00:47,930
I've added in the code blocks to make this effect work.

9
00:00:47,940 --> 00:00:51,650
I'll refresh the page so you can see a preview before we go over it.

10
00:00:52,830 --> 00:00:59,540
You can see now that when we shrink the size of the web browser the navigation bar hides the links unless

11
00:00:59,540 --> 00:01:00,680
we click on this button

12
00:01:04,040 --> 00:01:06,050
only then does it expand.

13
00:01:06,050 --> 00:01:09,520
The user can contract the navigation menu by clicking on the button again.

14
00:01:12,210 --> 00:01:19,120
You can see that we also have our sub menu there.

15
00:01:19,130 --> 00:01:23,960
This makes it much more convenient for the user when browsing the web page on a handheld device

16
00:01:29,010 --> 00:01:30,630
in order to create this.

17
00:01:30,930 --> 00:01:33,840
We first need to start with a button element

18
00:01:37,500 --> 00:01:44,800
and this is positioned after the div with with the class set to nav bar header inside the button element.

19
00:01:44,850 --> 00:01:54,830
We create a class nav bar toggle and a data toggle attribute set to collapse.

20
00:01:54,840 --> 00:01:57,330
We also need to set a data target.

21
00:01:57,330 --> 00:01:59,350
We've set it to NAV 1.

22
00:01:59,400 --> 00:02:06,470
This is very important and you'll see why this is relevant in the second in the button element.

23
00:02:06,490 --> 00:02:13,690
Create three spam tags each with the class set to icon bar.

24
00:02:13,750 --> 00:02:18,690
This is what styles are button you can see these three lines here.

25
00:02:18,730 --> 00:02:19,900
These are each icons

26
00:02:22,560 --> 00:02:23,590
next.

27
00:02:23,700 --> 00:02:31,920
We need to wrap our NAV bar buttons into a div with the same I.D. as the data target attribute that

28
00:02:31,920 --> 00:02:33,680
we previously set.

29
00:02:33,690 --> 00:02:37,760
So remember that data target we set over here to not have one.

30
00:02:37,890 --> 00:02:44,640
Well we need to create a div with the I.D. nav one those two values must match in order for this button

31
00:02:44,640 --> 00:02:45,110
to work.

32
00:02:47,420 --> 00:02:56,960
Give this div a class two classes collapse and that bar collapse.

33
00:02:56,970 --> 00:02:59,840
It's also important to remember to close the open div.

34
00:02:59,880 --> 00:03:10,410
We just created and you can see that we've wrapped both our unordered list elements inside this div

35
00:03:10,740 --> 00:03:12,030
the open and closed.

36
00:03:15,090 --> 00:03:16,360
And that's all there is to it.

37
00:03:17,050 --> 00:03:23,670
So once you save your file and refresh you'll now see the button there which allows you to expand and

38
00:03:23,670 --> 00:03:27,340
contract the navigation menu items.