1
00:00:02,680 --> 00:00:08,500
So now what I'm going to do is that I'm going to work on the design of the navigation bar, but when

2
00:00:08,500 --> 00:00:16,330
the navigation bar is in a small screen here in the small screen, if you click on the navigation bar,

3
00:00:16,690 --> 00:00:18,310
as you can see, the design doesn't look good.

4
00:00:18,320 --> 00:00:19,450
So let's work on this.

5
00:00:20,170 --> 00:00:25,600
So in order to work on this, I'm going to head on over to bootstrap and I'm going to hit the to see

6
00:00:25,640 --> 00:00:25,870
set.

7
00:00:26,590 --> 00:00:29,380
So in is we need to add.

8
00:00:30,490 --> 00:00:31,840
We tried the following cut.

9
00:00:34,740 --> 00:00:35,130
Here.

10
00:00:35,790 --> 00:00:42,200
So since this, this design is only applicable to small screens, we need to add it media.

11
00:00:43,380 --> 00:00:47,130
So I'm going to say here media at media.

12
00:00:48,630 --> 00:00:51,390
Only screen.

13
00:00:52,500 --> 00:00:59,820
And Max, what is?

14
00:01:02,680 --> 00:01:06,120
Maximum with is 990.

15
00:01:07,030 --> 00:01:08,050
So what does this mean?

16
00:01:08,410 --> 00:01:15,400
This means that the design that I'm going to add inside here will only be applied to two screens.

17
00:01:15,400 --> 00:01:20,890
That due to the design window, the screen is 990 X or smaller.

18
00:01:21,580 --> 00:01:24,610
Maximum with the maximum with this nine is 990.

19
00:01:25,180 --> 00:01:32,560
Beyond this, if even the screen is greater than if the screen is is is too big, the design is not

20
00:01:32,560 --> 00:01:33,490
going to take effect.

21
00:01:33,490 --> 00:01:34,540
It's not going to work.

22
00:01:35,230 --> 00:01:39,190
So this is what I mean by by the by using this.

23
00:01:39,190 --> 00:01:39,460
Good.

24
00:01:40,240 --> 00:01:45,460
So here, in case the screen is small, I'm going to say that now, buttons.

25
00:01:47,500 --> 00:01:49,870
Now Barron's which is this.

26
00:01:52,910 --> 00:01:53,510
Which.

27
00:01:54,770 --> 00:01:55,780
There's now a balance.

28
00:01:56,570 --> 00:02:00,560
So these numbers, we need to remove the margin.

29
00:02:00,560 --> 00:02:01,760
So I'm going to say margin.

30
00:02:02,820 --> 00:02:07,230
Then, because we have already given this this balance now.

31
00:02:07,230 --> 00:02:11,700
But as I remember at the top, we have given the numbers 60%.

32
00:02:11,730 --> 00:02:15,270
So we pushed we pushed the margin left 60%.

33
00:02:15,600 --> 00:02:17,370
And we need to remove this by adding.

34
00:02:18,420 --> 00:02:20,560
By changing the margin to be only ten votes.

35
00:02:21,210 --> 00:02:23,070
Now, if I save and refresh.

36
00:02:25,160 --> 00:02:26,060
And click here.

37
00:02:26,480 --> 00:02:28,340
As you can see, the margin will only be ten.

38
00:02:29,090 --> 00:02:31,430
Let's also fix the design here further.

39
00:02:31,880 --> 00:02:42,440
So for for this, I'm going to say here that now buttons u l and then I'm going to change the margin.

40
00:02:44,230 --> 00:02:53,080
The margin is going to be 1rm and the justify content is going to be flex start.

41
00:02:53,830 --> 00:03:02,590
So they are going to be from the left side, from the left and the line items is going to be also flex

42
00:03:02,650 --> 00:03:02,890
are.

43
00:03:04,440 --> 00:03:06,990
Finally we fixed a line.

44
00:03:10,130 --> 00:03:13,250
He's going to be left for the.

45
00:03:13,970 --> 00:03:15,170
For these icons.

46
00:03:15,170 --> 00:03:16,220
For these icons.

47
00:03:16,670 --> 00:03:26,270
What I'm going to do is that I'm going to say that nav buttons and then u l and then dot S.A.S..

48
00:03:26,930 --> 00:03:29,060
Because these two items.

49
00:03:30,500 --> 00:03:34,310
These two items have a class called if s.

50
00:03:36,970 --> 00:03:39,430
So here I'm going to say margin.

51
00:03:41,250 --> 00:03:50,250
Margin and then Twin Peaks Slice speaks in the X and Twin Peaks.

52
00:03:50,760 --> 00:03:59,760
So margin Twin Peaks from the top, margin five from the right, margin ten from the bottom and margin

53
00:03:59,760 --> 00:04:01,290
20 from the left.

54
00:04:01,830 --> 00:04:10,500
And here I said now Barron's ul because the F S-Class is located inside the UL of the navy of the virus

55
00:04:11,370 --> 00:04:19,890
because this class in f f s is inside this u l which is inside the nav buttons.

56
00:04:21,090 --> 00:04:23,100
Let me now click on file and save able.

57
00:04:25,250 --> 00:04:26,090
Elaina refresh.

58
00:04:28,190 --> 00:04:29,690
As you can see, it looks amazing.

59
00:04:29,960 --> 00:04:32,140
Now we have a better space.

60
00:04:32,930 --> 00:04:37,460
And the design for small screens is going to look like this, where there's a space from the left on

61
00:04:37,460 --> 00:04:39,590
the right, everything looks amazing.