1
00:00:00,090 --> 00:00:01,044
Hello, welcome back.

2
00:00:01,045 --> 00:00:04,292
Let's add some styling to the navigation menu now.

3
00:00:04,293 --> 00:00:11,850
So we go back to base.html, and the first item is nav.

4
00:00:11,851 --> 00:00:14,772
First of all, we want to select all

5
00:00:14,773 --> 00:00:20,370
these and indent them, one and two.

6
00:00:20,371 --> 00:00:25,933
So it should be indented under the body tag, right.

7
00:00:27,599 --> 00:00:31,100
So we'll start with nav and class

8
00:00:31,101 --> 00:00:34,000
equal to, I know some classes from

9
00:00:34,001 --> 00:00:36,566
[Author Typing]

10
00:00:36,567 --> 00:00:39,632
Bootstrap, and you can also find examples online.

11
00:00:39,633 --> 00:00:42,800
So navbar, it specifies that this is a navbar.

12
00:00:42,801 --> 00:00:44,633
So use the navbar styling,

13
00:00:44,634 --> 00:00:46,700
[Author Typing]

14
00:00:46,701 --> 00:00:49,233
navbar-light

15
00:00:49,234 --> 00:00:51,133
[Author Typing]

16
00:00:51,134 --> 00:00:55,520
for the color, and the background bg-light as well.

17
00:00:56,450 --> 00:00:57,790
Have some shadow, and,

18
00:00:58,770 --> 00:01:01,732
and then you also need to give,

19
00:01:01,733 --> 00:01:04,750
so class is one property of nav.

20
00:01:04,751 --> 00:01:07,528
And also after the quote, here you need to

21
00:01:07,529 --> 00:01:13,256
give another id equal to mainNav like that.

22
00:01:13,257 --> 00:01:16,914
So this is used by JavaScript of Bootstrap.

23
00:01:16,915 --> 00:01:23,510
Then the next div, will have a class of collapse.

24
00:01:23,510 --> 00:01:25,530
[Author Typing]

25
00:01:25,531 --> 00:01:27,650
navbar-collapse.

26
00:01:27,651 --> 00:01:32,500
So these are different classes, and an id of,

27
00:01:32,501 --> 00:01:34,552
[Author Typing]

28
00:01:34,553 --> 00:01:37,690
navbarResponsive.

29
00:01:39,470 --> 00:01:41,900
Then we have the ul class.

30
00:01:41,901 --> 00:01:45,566
[Author Typing]

31
00:01:45,567 --> 00:01:50,858
navbar-nav ml-auto.

32
00:01:50,859 --> 00:01:56,710
ml stands for margin left and its value will be auto.

33
00:01:56,711 --> 00:02:05,534
And lastly, the li class is nav-item.

34
00:02:05,535 --> 00:02:09,356
So this is an item of the menu and that's it.

35
00:02:09,357 --> 00:02:12,600
Save that and see what will change.

36
00:02:13,450 --> 00:02:16,120
Okay, not bad.

37
00:02:17,130 --> 00:02:21,792
Now the a text. So the links don't look very nice, but

38
00:02:21,793 --> 00:02:25,130
the bar itself looks good with a shadow.

39
00:02:26,190 --> 00:02:30,564
So let's do, the styling of a text.

40
00:02:30,565 --> 00:02:41,690
So a class equal to navbar-brand, save, reloads,

41
00:02:41,691 --> 00:02:45,090
Home looks good, but About Us doesn't.

42
00:02:45,910 --> 00:02:47,766
So let's do the same for

43
00:02:47,767 --> 00:02:54,100
[Author Typing]

44
00:02:54,101 --> 00:02:55,380
the other one.

45
00:02:55,930 --> 00:02:57,960
Like that, yeah, it looks good.

46
00:02:58,700 --> 00:03:04,844
Now, we need to put it a bit to the right and a

47
00:03:04,845 --> 00:03:11,740
p-3 class, added to the first a tag, should work.

48
00:03:12,670 --> 00:03:17,408
So save, refresh, and it goes more to the right.

49
00:03:17,409 --> 00:03:23,732
So p-3 means that, give it a padding around that a

50
00:03:23,733 --> 00:03:26,820
class, and you should do the same for the other ones.

51
00:03:26,821 --> 00:03:29,914
So p-3, save, refresh.

52
00:03:29,915 --> 00:03:33,162
So that is the navigation menu.

53
00:03:33,163 --> 00:03:35,624
Now down here we want more space

54
00:03:35,625 --> 00:03:38,420
between the navigation menu and this content.

55
00:03:39,030 --> 00:03:40,500
Let's fix that.

56
00:03:41,350 --> 00:03:43,416
I think that would work by

57
00:03:43,417 --> 00:03:47,410
adding to the navigation element,

58
00:03:47,411 --> 00:03:49,426
to the class of the navigation element,

59
00:03:49,427 --> 00:03:54,108
we could add, an mb-3.

60
00:03:54,109 --> 00:03:57,933
So mb stands for margin bottom,

61
00:03:57,934 --> 00:04:00,330
[No Audio]

62
00:04:00,331 --> 00:04:03,068
refresh and yeah, now it's better.

63
00:04:03,069 --> 00:04:04,844
So there is some space now

64
00:04:04,845 --> 00:04:08,524
under the menu, the navigation menu bar.

65
00:04:08,525 --> 00:04:11,012
And that's about it.

66
00:04:11,013 --> 00:04:14,400
I hope this makes sense and I'll talk to you later, thanks.