1
00:00:00,190 --> 00:00:03,210
On the left side of
Bootstrap 4's documentation,

2
00:00:03,210 --> 00:00:05,360
there is a list of components.

3
00:00:05,360 --> 00:00:09,090
And one of those components
is the Navbar component,

4
00:00:09,090 --> 00:00:12,660
which you can find a link to in
the notes associated with this video.

5
00:00:13,880 --> 00:00:20,740
A navbar can hold something like a logo
and navigation, just like we already have.

6
00:00:20,740 --> 00:00:26,550
But it can also hold other features,
like a collapsible responsive menu,

7
00:00:26,550 --> 00:00:31,310
and the ability to be fixed to
the top of the page while you scroll.

8
00:00:31,310 --> 00:00:35,853
This is a more robust solution that
can also include things like forms and

9
00:00:35,853 --> 00:00:36,829
search boxes.

10
00:00:36,829 --> 00:00:38,743
We won't need all of those features, but

11
00:00:38,743 --> 00:00:41,590
it's nice to have in case
we want them down the road.

12
00:00:41,590 --> 00:00:47,140
So, let's use some of these
navbar classes on our site.

13
00:00:48,170 --> 00:00:52,540
So I'm going to switch back to Workspaces,
and

14
00:00:52,540 --> 00:00:55,320
we're going to modify
our header quite a bit.

15
00:00:55,320 --> 00:00:59,220
So I'm going to type this out and
then explain it.

16
00:00:59,220 --> 00:01:03,580
So first, in the header,
we're going to change out

17
00:01:03,580 --> 00:01:08,920
all of the classes, and
the first class will be navbar.

18
00:01:08,920 --> 00:01:15,738
The next one is navbar-expand-md,
md is for medium.

19
00:01:15,738 --> 00:01:19,140
So the navbar will be
expanded at medium sizes, and

20
00:01:19,140 --> 00:01:21,680
then at smaller sizes it
will collapse into a button.

21
00:01:22,950 --> 00:01:28,370
Then, we're going to add
the class navbar-dark and

22
00:01:28,370 --> 00:01:31,810
then, bg, or background, -dark.

23
00:01:31,810 --> 00:01:35,140
And together these two classes
will make the navbar dark.

24
00:01:35,140 --> 00:01:39,910
And then it will tell the navbar that
it's dark and so it will use light text.

25
00:01:41,750 --> 00:01:46,830
Next, let's modify the h1

26
00:01:46,830 --> 00:01:52,553
with the class navbar-brand.

27
00:01:52,553 --> 00:01:56,350
Then on the nav element,
we'll add a few classes there.

28
00:01:57,510 --> 00:02:04,306
First one is collapse and
then navbar-collapse and

29
00:02:04,306 --> 00:02:07,863
justify-content-end.

30
00:02:07,863 --> 00:02:13,600
And then we're going to add an id,
which will be used for our button later.

31
00:02:13,600 --> 00:02:17,880
And the id will be navbarPrimary.

32
00:02:19,770 --> 00:02:22,354
And then on the unordered list,

33
00:02:22,354 --> 00:02:27,057
we're going to change this
list from nav to navbar-nav.

34
00:02:27,057 --> 00:02:30,630
And the remaining classes
can stay the same.

35
00:02:30,630 --> 00:02:38,500
But on the second list item, let's add
the class active to the list item.

36
00:02:38,500 --> 00:02:43,420
And this will select the Artists link, so

37
00:02:43,420 --> 00:02:46,710
that it looks like that's the part of
the website that we're navigated to,

38
00:02:46,710 --> 00:02:50,920
because we're looking at
an artist's profile page.

39
00:02:50,920 --> 00:02:54,270
So let's save that and review.

40
00:02:55,550 --> 00:03:01,510
First, we removed all of our flex
box classes on the header and

41
00:03:01,510 --> 00:03:07,190
replaced them with navbar classes,
which also act as a flex box container.

42
00:03:07,190 --> 00:03:10,570
So we don't need those
redundant flex box classes.

43
00:03:10,570 --> 00:03:17,670
This creates the navbar and
makes it toggleable through a menu.

44
00:03:17,670 --> 00:03:22,490
And it also sets the navbar to have
a dark background with light text.

45
00:03:22,490 --> 00:03:26,130
And that will help separate
the navigation from the rest of the page.

46
00:03:27,460 --> 00:03:33,430
Then we added a navbar-brand
class to the h1 element,

47
00:03:33,430 --> 00:03:37,520
which can be used for
a logo later on, if we want.

48
00:03:37,520 --> 00:03:39,395
Finally, we added the collapse and

49
00:03:39,395 --> 00:03:45,660
navbar-collapse classes to the navbar,
which will collapse it.

50
00:03:45,660 --> 00:03:49,698
We also added
the justify-content-end class,

51
00:03:49,698 --> 00:03:53,446
which will move these
links over to the right,

52
00:03:53,446 --> 00:03:57,205
rather than having them
right next to the h1.

53
00:03:59,254 --> 00:04:05,660
So, let's preview this page and
see how it looks.

54
00:04:05,660 --> 00:04:10,120
And so far so good, but if we resize this,

55
00:04:11,160 --> 00:04:15,840
the links will disappear and reappear.

56
00:04:15,840 --> 00:04:22,690
So after that medium breakpoint,
we don't have a button there.

57
00:04:22,690 --> 00:04:26,080
We want to instead collapse
our nav into a button

58
00:04:26,080 --> 00:04:30,590
that reveals the navigation
links in a list.

59
00:04:30,590 --> 00:04:36,460
So, following the example in the Bootstrap
documentation, let's do just that.

60
00:04:36,460 --> 00:04:38,640
So I'll go back to our Workspace here.

61
00:04:39,670 --> 00:04:44,310
And just after the h1, actually

62
00:04:44,310 --> 00:04:49,470
this nav doesn't need to be indented, so
let's bring that back closer to the h1.

63
00:04:50,620 --> 00:04:55,341
So just after the h1,
we'll add a button here.

64
00:04:57,132 --> 00:05:03,426
And we'll give it
the class navbar-toggler.

65
00:05:06,265 --> 00:05:10,515
We'll give it the type
attribute of button.

66
00:05:12,714 --> 00:05:20,724
We're going to add the attribute
data-toggle, collapse,

67
00:05:20,724 --> 00:05:27,140
and this will make it interactive, so it
actually expands and collapses the menu.

68
00:05:27,140 --> 00:05:30,613
And then we need to give it a target.

69
00:05:30,613 --> 00:05:36,175
So the data-target,
as you may have guessed,

70
00:05:36,175 --> 00:05:39,240
is the id we used earlier.

71
00:05:39,240 --> 00:05:44,870
So we're saying that this button
is targeting this navigation menu,

72
00:05:44,870 --> 00:05:46,610
so there's no confusion.

73
00:05:46,610 --> 00:05:53,700
So let's just grab that id and paste it
there to make sure it's exactly the same.

74
00:05:55,220 --> 00:06:00,656
And then inside of this button we're going

75
00:06:00,656 --> 00:06:07,464
to add a span with the class
navbar-toggler-icon.

76
00:06:09,601 --> 00:06:15,810
And that will add in the hamburger
menu icon that we know and love.

77
00:06:16,810 --> 00:06:21,915
Now, if we save this, switch over
to the browser and refresh again.

78
00:06:24,120 --> 00:06:28,859
You can see that the button appears
at these smaller sizes, and

79
00:06:28,859 --> 00:06:32,089
changes into navigation at larger sizes.

80
00:06:33,300 --> 00:06:38,932
And if we click on the button,
Nothing happens,

81
00:06:38,932 --> 00:06:44,516
and that's because in our data-target
we actually need a hash or

82
00:06:44,516 --> 00:06:48,130
pound sign just before navbarPrimary.

83
00:06:48,130 --> 00:06:51,673
So let's save that,
refresh, and try this again.

84
00:06:55,523 --> 00:07:00,700
And now, our nav menu expands and
collapses just like we would expect it to.

85
00:07:02,190 --> 00:07:05,890
Finally, we should space
this navbar out just a bit,

86
00:07:06,920 --> 00:07:10,680
similar to how our navigation
was spaced out previously.

87
00:07:10,680 --> 00:07:16,630
So that it's away from the content and
away from the top of the page.

88
00:07:16,630 --> 00:07:21,169
So in our CSS, We

89
00:07:21,169 --> 00:07:26,091
still have padding on the header element,

90
00:07:26,091 --> 00:07:31,160
and it should instead
be changed to margin.

91
00:07:32,320 --> 00:07:37,030
So we'll save that and
if we switch back, and refresh again,

92
00:07:37,030 --> 00:07:40,937
you can see that it spaced
back out appropriately.

93
00:07:40,937 --> 00:07:44,176
We could keep iterating on this, but for

94
00:07:44,176 --> 00:07:49,430
now the basic functionality is there,
and it looks pretty good.