1
00:00:03,650 --> 00:00:11,190
We just completed a discussion on the importance of providing navigation in your website.

2
00:00:11,190 --> 00:00:15,920
We also looked at several different ways that we can provide navigation in a website.

3
00:00:15,920 --> 00:00:21,229
It's now time for us to look at bootstrap and look into components

4
00:00:21,229 --> 00:00:26,269
that bootstrap provides that enable us to add navigation to our websites.

5
00:00:26,269 --> 00:00:32,815
Two important components from bootstrap is the Navbar and Breadcrumbs.

6
00:00:32,815 --> 00:00:37,610
We're going to examine both of these in this exercise.

7
00:00:37,610 --> 00:00:44,745
Let's get started by adding a navigation bar to the top of our web page.

8
00:00:44,745 --> 00:00:50,065
We can do that using the Navbar component that is part of bootstrap.

9
00:00:50,065 --> 00:00:51,605
So, how do we get started?

10
00:00:51,605 --> 00:00:56,260
We go to the body of our HTML page.

11
00:00:56,260 --> 00:00:58,760
So here, I have index.HTML open.

12
00:00:58,760 --> 00:01:00,495
And at the top,

13
00:01:00,495 --> 00:01:06,090
I'm going to add in an element using that nav HTML tag.

14
00:01:06,090 --> 00:01:10,330
Now the nav HTML tag is intended for providing navigation.

15
00:01:10,330 --> 00:01:17,880
So, let's take the advantage of this tag and build our navigation bar using the nav tag.

16
00:01:17,880 --> 00:01:19,645
So now, at the top,

17
00:01:19,645 --> 00:01:22,055
I'm going to add in this tag,

18
00:01:22,055 --> 00:01:30,040
put the nav and construct the navigation bar around this nav tag.

19
00:01:30,040 --> 00:01:33,910
So, once we add this nav tag into index.HTML,

20
00:01:33,910 --> 00:01:39,590
then we can go ahead and then apply the bootstraps classes to this nav tag.

21
00:01:39,590 --> 00:01:42,700
So, I apply the class navbar.

22
00:01:42,700 --> 00:01:47,485
So, the navbar class in bootstrap allows me to create a navigation bar.

23
00:01:47,485 --> 00:01:50,730
There are many different ways of customizing the navigation bar,

24
00:01:50,730 --> 00:01:56,600
which we have a look at as additional classes that will add to this nav tag.

25
00:01:56,600 --> 00:01:58,770
Along with the navbar,

26
00:01:58,770 --> 00:02:02,880
we also add in the next class which is navbar-dark.

27
00:02:02,880 --> 00:02:08,480
Now I want my navigation bar to be dark in color,

28
00:02:08,480 --> 00:02:09,985
with a darker background.

29
00:02:09,985 --> 00:02:13,920
Because that goes very well with the website that I have just designed.

30
00:02:13,920 --> 00:02:16,150
We can have navbar-light,

31
00:02:16,150 --> 00:02:18,950
which is a lighter color navigation bar.

32
00:02:18,950 --> 00:02:23,775
So, you can choose to use either one of them in your web page.

33
00:02:23,775 --> 00:02:32,620
The next class that I'm going to use is navbar-expand-sm class.

34
00:02:32,620 --> 00:02:36,870
Now, and also, I will specify the screen size below

35
00:02:36,870 --> 00:02:42,064
which the toggle-able behavior comes into existence.

36
00:02:42,064 --> 00:02:45,165
Now, when I say navbar-expand-sm,

37
00:02:45,165 --> 00:02:48,480
that means that for small and extra small screens,

38
00:02:48,480 --> 00:02:51,370
this navbars will become a toggle-able navbar.

39
00:02:51,370 --> 00:02:57,080
Meaning that, it will be collapsed in those screen sizes.

40
00:02:57,080 --> 00:03:00,520
You will pretty soon learn how this works,

41
00:03:00,520 --> 00:03:02,930
when we look at how we can add

42
00:03:02,930 --> 00:03:07,460
the collapse plugin to the navbar to enable that kind of behavior.

43
00:03:07,460 --> 00:03:10,970
So along with a navbar toggle-able sm,

44
00:03:10,970 --> 00:03:15,240
I'm going to apply a background color to the navbar initially,

45
00:03:15,240 --> 00:03:18,570
which would be bg-primary.

46
00:03:18,570 --> 00:03:25,909
Now bg-primary is that primary color that is defined in your bootstrap.

47
00:03:25,909 --> 00:03:33,350
By default, this is a version of blue color that is used by bootstraps.

48
00:03:33,350 --> 00:03:35,910
So I'm going to start with that as my primary color.

49
00:03:35,910 --> 00:03:42,350
Later on, I will customize my navbar's color using some CSS classes.

50
00:03:42,350 --> 00:03:45,155
In addition, I am also going to apply

51
00:03:45,155 --> 00:03:50,255
another class called the fixed-top to that navigation bar.

52
00:03:50,255 --> 00:03:55,210
What fixed-top does, is it fixes the navigation bar to the top

53
00:03:55,210 --> 00:04:00,330
of the browser window where this web page is being rendered.

54
00:04:00,330 --> 00:04:03,830
Even when you scroll your wet page,

55
00:04:03,830 --> 00:04:07,870
the navigation bar was till remain at the top of the page.

56
00:04:07,870 --> 00:04:12,250
You can simply use fixed bottom to fix

57
00:04:12,250 --> 00:04:18,235
the navigation bar to the bottom of your browser window or you can say, static top.

58
00:04:18,235 --> 00:04:21,810
And also, you can just not use this class.

59
00:04:21,810 --> 00:04:23,140
If you don't use that,

60
00:04:23,140 --> 00:04:29,325
then your navigation bar will also scroll when your web page is scrolled upwards.

61
00:04:29,325 --> 00:04:36,670
In my website, I choose to keep the navigation bar fixed at the top of the page.

62
00:04:36,670 --> 00:04:38,600
There are many other options that are

63
00:04:38,600 --> 00:04:43,920
available which you can find in the bootstraps documentation.

64
00:04:43,920 --> 00:04:48,495
So this is one example of the use of the navigation bar.

65
00:04:48,495 --> 00:04:51,645
Now in addition, inside the navigation bar,

66
00:04:51,645 --> 00:04:54,545
I'm going to enclose whatever content

67
00:04:54,545 --> 00:04:57,450
is going to be used in the navigation bar inside a container.

68
00:04:57,450 --> 00:05:02,880
So this is where I will use a div element here

69
00:05:02,880 --> 00:05:10,125
and apply the container class to this div element.

70
00:05:10,125 --> 00:05:12,520
So, whatever is enclosed inside there,

71
00:05:12,520 --> 00:05:17,375
will be restricted to the same width as the rest of my Web page.

72
00:05:17,375 --> 00:05:20,575
As you recall, I used the container class to

73
00:05:20,575 --> 00:05:24,870
define the breadth of the content in my web page,

74
00:05:24,870 --> 00:05:28,080
so I'm going to apply the same to my navigation bar also,

75
00:05:28,080 --> 00:05:31,490
so that my navigation bar information will be

76
00:05:31,490 --> 00:05:36,185
displayed within the same width as the rest of my web page.

77
00:05:36,185 --> 00:05:41,225
You can choose not to use the container class in the navigation bar, In which case,

78
00:05:41,225 --> 00:05:47,200
the contents of the navigation bar will spread over the entire width of your screen.

79
00:05:47,200 --> 00:05:49,055
Inside the navigation bar,

80
00:05:49,055 --> 00:05:54,280
I'm going to adding a class to an a tag here.

81
00:05:54,280 --> 00:06:02,390
This class which I call as navbar-brand,

82
00:06:02,520 --> 00:06:09,170
allows me to display some information as a branding information in my navigation bar.

83
00:06:09,170 --> 00:06:11,110
So if you have a company for example,

84
00:06:11,110 --> 00:06:13,050
you can display the name of your company or

85
00:06:13,050 --> 00:06:16,040
the logo of your company using the navbar-brand

86
00:06:16,040 --> 00:06:21,390
so that will be prominently displayed in your navigation bar.

87
00:06:21,390 --> 00:06:23,370
Obviously, when you visit many websites,

88
00:06:23,370 --> 00:06:26,400
you will see that the name of the company is somewhere visible in

89
00:06:26,400 --> 00:06:30,310
the navigation bar of that website.

90
00:06:30,310 --> 00:06:33,085
So, let me add in that navbar-brand.

91
00:06:33,085 --> 00:06:42,190
This can also be hyperlinked to the home page of your website.

92
00:06:42,190 --> 00:06:43,895
So, I'm going to leave that there.

93
00:06:43,895 --> 00:06:46,000
In the remaining pages on my website,

94
00:06:46,000 --> 00:06:50,480
I will just add the href to bring me back to the index.HTML page,

95
00:06:50,480 --> 00:06:52,449
which is the homepage.

96
00:06:52,449 --> 00:07:00,109
And inside here I'm going to add in the name of my restaurant.

97
00:07:03,220 --> 00:07:06,890
Let's save the changes and go and have

98
00:07:06,890 --> 00:07:11,110
a quick look at the current state of my navigation bar.

99
00:07:11,110 --> 00:07:13,710
Going to the web page in the browser,

100
00:07:13,710 --> 00:07:21,150
you can now see where navigation bar is visible on my web page in the browser.

101
00:07:21,150 --> 00:07:25,960
The navigation bar is now at the top of the page and you

102
00:07:25,960 --> 00:07:30,490
can see that as I scroll my page,

103
00:07:30,490 --> 00:07:36,745
the navigation bar still remains at the top because I used to fixed-top class.

104
00:07:36,745 --> 00:07:38,520
You can also see

105
00:07:38,520 --> 00:07:45,460
the navbar-brand allowing me to display the name of the restaurant there.

106
00:07:45,460 --> 00:07:50,310
Later on I'm going to replace that with the logo for this restaurant.

107
00:07:50,310 --> 00:07:56,010
You do notice that the navigation bar is partly covered in the Jumbotron.

108
00:07:56,010 --> 00:08:01,395
You're going to fix that a little bit later using some CSS customization.

109
00:08:01,395 --> 00:08:07,255
The next thing that I'm going to do is to adding a few links to my navigation bar,

110
00:08:07,255 --> 00:08:13,060
so that these links will lead me to the other pages in my website.

111
00:08:13,060 --> 00:08:14,790
So how do we do that?

112
00:08:14,790 --> 00:08:17,575
Going back to index.HTML,

113
00:08:17,575 --> 00:08:24,490
I'm going to add in a ul here,

114
00:08:24,490 --> 00:08:27,715
within which I'm going to declare

115
00:08:27,715 --> 00:08:36,460
all the various links that are going to be displayed in my navigation box.

116
00:08:36,460 --> 00:08:43,590
So this ul to which I'm going to apply the class as navbar-nav.

117
00:08:43,590 --> 00:08:46,530
So this is the class that will help me to define

118
00:08:46,530 --> 00:08:51,275
the set of links that will be included in my navigation bar.

119
00:08:51,275 --> 00:08:56,655
And these links will be displayed horizontally inside my navigation bar.

120
00:08:56,655 --> 00:09:01,660
The mr auto-class that I have also applied to the ul,

121
00:09:01,660 --> 00:09:05,740
is used to specify the right margin.

122
00:09:05,740 --> 00:09:08,590
So this is a utility class that is available

123
00:09:08,590 --> 00:09:13,815
in bootstrap that allows me to specify the right margin.

124
00:09:13,815 --> 00:09:17,190
So if I say, mr-auto,

125
00:09:17,190 --> 00:09:19,390
what it means is that on the right side,

126
00:09:19,390 --> 00:09:23,100
the right margin should be set as much as possible.

127
00:09:23,100 --> 00:09:26,380
So which means that the content will be pushed as left as

128
00:09:26,380 --> 00:09:30,175
possible within the navigation bar.

129
00:09:30,175 --> 00:09:32,310
Inside this unordered list,

130
00:09:32,310 --> 00:09:34,515
I can use list elements to include

131
00:09:34,515 --> 00:09:38,775
the various links that are going to be part of my navigation bar.

132
00:09:38,775 --> 00:09:42,595
So in there, I'm going to add in a few links there

133
00:09:42,595 --> 00:09:48,900
and I will start on by specifying the first one there with the link.

134
00:09:48,900 --> 00:09:51,830
To every list item in your navigation bar,

135
00:09:51,830 --> 00:09:56,110
you're going to apply the class as nav item.

136
00:09:56,110 --> 00:10:03,780
This allows these list items to be displayed horizontally as links in my navigation bar.

137
00:10:03,780 --> 00:10:06,055
And then inside here,

138
00:10:06,055 --> 00:10:10,640
I can then use the a tag to add in

139
00:10:10,640 --> 00:10:16,140
the actual link that will be part of my navigation bar.

140
00:10:16,140 --> 00:10:19,600
So inside there I use the a tag with

141
00:10:19,600 --> 00:10:28,730
the class nav-link and this also allows me to use the href.

142
00:10:30,260 --> 00:10:37,145
Attribute to define the link there.

143
00:10:37,145 --> 00:10:41,255
And the first one that I'm going to include is Home.

144
00:10:41,255 --> 00:10:46,935
So, this would include an item called Home in this navigation bar.

145
00:10:46,935 --> 00:10:51,900
Let me just copy that and then paste that.

146
00:10:51,900 --> 00:10:55,475
And then we will edit some of these because I want to add

147
00:10:55,475 --> 00:11:00,630
four different ones to my navigation bar.

148
00:11:00,630 --> 00:11:02,110
The first one is Home.

149
00:11:02,110 --> 00:11:04,170
The second one would be About.

150
00:11:04,170 --> 00:11:13,560
The third one would be Menu which I'm going to build as part of the next course.

151
00:11:13,560 --> 00:11:16,630
And the last one will be Contact.

152
00:11:16,630 --> 00:11:25,495
A typical company website would have links like this in its navigation bar.

153
00:11:25,495 --> 00:11:27,830
So with adding these two,

154
00:11:27,830 --> 00:11:30,915
now what I can do is

155
00:11:30,915 --> 00:11:36,560
that we can explicitly identify one of these links as the active link,

156
00:11:36,560 --> 00:11:39,600
meaning that when you are on that particular page,

157
00:11:39,600 --> 00:11:42,145
that particular link can be highlighted.

158
00:11:42,145 --> 00:11:48,685
So to do that, we will apply here the class called active to one of these list items.

159
00:11:48,685 --> 00:11:51,815
In this case, since this is the index.html page,

160
00:11:51,815 --> 00:11:56,085
I'm applying the active class to the home link there.

161
00:11:56,085 --> 00:12:02,725
This pretty much completes my navigation bar in the index.HTML page.

162
00:12:02,725 --> 00:12:08,095
One little thing that I would like to fix here is that the About link,

163
00:12:08,095 --> 00:12:12,130
I want to link it to the aboutus.HTML

164
00:12:12,130 --> 00:12:16,965
page that we have already included into our website,

165
00:12:16,965 --> 00:12:19,680
because that is where I want it to lead.

166
00:12:19,680 --> 00:12:23,795
Let's go and take a quick look at our navigation bar of this part.

167
00:12:23,795 --> 00:12:25,985
Coming back to our navigation bar,

168
00:12:25,985 --> 00:12:28,995
you can immediately see the result of including

169
00:12:28,995 --> 00:12:32,730
those items into the unordered list there.

170
00:12:32,730 --> 00:12:34,160
So, you see the Home,

171
00:12:34,160 --> 00:12:36,500
About, Menu, and Contact there,

172
00:12:36,500 --> 00:12:43,145
and each of them is a link but this is a navigation item here.

173
00:12:43,145 --> 00:12:48,740
And note how the Home is highlighted here because of the use of the active class.

174
00:12:48,740 --> 00:12:50,305
So, if I click on the About,

175
00:12:50,305 --> 00:12:52,990
it should take me to the About pitch.

176
00:12:52,990 --> 00:12:55,670
Lo and behold, there we are.

177
00:12:55,670 --> 00:12:58,970
But I do realize that I don't have a way of going back,

178
00:12:58,970 --> 00:13:04,190
so which means that I also need to hand this navigation bar to the aboutus.HTML page.

179
00:13:04,190 --> 00:13:07,330
We will get there in a short while.

180
00:13:07,330 --> 00:13:11,360
For now, I'm going to quickly navigate using the back button of

181
00:13:11,360 --> 00:13:16,585
my browser back to my index.HTML page.

182
00:13:16,585 --> 00:13:21,030
One thing that I also wanted to demonstrate to you was how

183
00:13:21,030 --> 00:13:27,525
this navigation bar will collapse for small and extra small screen sizes.

184
00:13:27,525 --> 00:13:35,570
So, let's turn on the view using the Responsive View,

185
00:13:35,570 --> 00:13:37,960
and then let me go to the Galaxy S5.

186
00:13:37,960 --> 00:13:43,250
And I noticed that when I use the Galaxy S5 like this,

187
00:13:43,250 --> 00:13:50,000
you can see that this is being displayed earlier than it is already covering the screen.

188
00:13:50,000 --> 00:13:52,145
That is not the behavior that I want.

189
00:13:52,145 --> 00:14:00,075
I want to be able to hide this when I am viewing this on a small and extra small screen.

190
00:14:00,075 --> 00:14:04,220
And then perhaps I add a button here which I can use

191
00:14:04,220 --> 00:14:08,450
to toggle on and off the display of these links.

192
00:14:08,450 --> 00:14:13,170
You have seen such things in mobile websites.

193
00:14:13,170 --> 00:14:16,935
How do we do this in bootstrap?

194
00:14:16,935 --> 00:14:19,645
Let's go to that step next.

195
00:14:19,645 --> 00:14:24,300
Going back to our navigation bar here.

196
00:14:24,300 --> 00:14:27,910
Let me add in a button there,

197
00:14:27,910 --> 00:14:33,840
which will act as the toggle button for showing and hiding

198
00:14:33,840 --> 00:14:42,225
my links from my navigation bar when it is displayed on extra smart and small screens.

199
00:14:42,225 --> 00:14:43,615
So, to add there,

200
00:14:43,615 --> 00:14:47,645
let me add in a button and apply some classes to this button.

201
00:14:47,645 --> 00:14:54,285
We're going to discuss more about buttons in bootstrap in the next lesson.

202
00:14:54,285 --> 00:14:57,515
But to add a button in bootstrap,

203
00:14:57,515 --> 00:15:03,770
you would apply the class for this particular button as navbar-toggler.

204
00:15:04,450 --> 00:15:07,420
So, this is a navbar-toggler.

205
00:15:07,420 --> 00:15:09,400
So, as the name implies,

206
00:15:09,400 --> 00:15:14,970
you are already beginning to understand what this button is going to do in this case.

207
00:15:14,970 --> 00:15:22,650
And then I would add the type as button to indicate that this is acting as a button.

208
00:15:22,650 --> 00:15:31,360
And then data-toggle as collapse.

209
00:15:31,360 --> 00:15:36,070
Now, this data-toggle attribute that you'll see here is actually

210
00:15:36,070 --> 00:15:42,400
a JavaScript component usage in bootstrap.

211
00:15:42,400 --> 00:15:48,100
We're going to look at this data hyphens bar kind of attributes more in the next module,

212
00:15:48,100 --> 00:15:50,875
where we will look at bootstraps JavaScript components.

213
00:15:50,875 --> 00:15:55,225
The nav bar requires one of those JavaScript components to be able to

214
00:15:55,225 --> 00:15:59,980
toggle on and off my links in my navigation bar, So,

215
00:15:59,980 --> 00:16:03,825
that's the reason why I quickly introduced this concept here,

216
00:16:03,825 --> 00:16:05,800
but we'll come back to examine

217
00:16:05,800 --> 00:16:12,020
this bootstraps JavaScript components more in the next module.

218
00:16:12,020 --> 00:16:14,420
So, data-toggle collapse and

219
00:16:14,420 --> 00:16:24,610
then the data-target as #Navbar.

220
00:16:24,610 --> 00:16:30,660
Now, I'm going to introduce another div with the ID as navbar.

221
00:16:30,660 --> 00:16:33,470
So, when I specify a date or target #Navbar,

222
00:16:33,470 --> 00:16:38,560
that refers to the ID of that other element which is going to be

223
00:16:38,560 --> 00:16:44,025
the target of this particular button here.

224
00:16:44,025 --> 00:16:47,625
So, that's the part that I add in to the bottom.

225
00:16:47,625 --> 00:16:52,340
And also, I want the button to display something here.

226
00:16:52,340 --> 00:16:56,970
And typically, when you see these kind of buttons in mobile websites,

227
00:16:56,970 --> 00:16:59,730
it would contain free lines there,

228
00:16:59,730 --> 00:17:04,310
so which is typically called as the Navbar-toggle icon.

229
00:17:04,310 --> 00:17:11,630
So, I'm going to include a special icon that

230
00:17:11,630 --> 00:17:19,660
is included in bootstrap, called navbar-toggler icon.

231
00:17:19,660 --> 00:17:23,395
So, if I apply this class to span tag,

232
00:17:23,395 --> 00:17:29,050
then that will introduce a navbar-toggler icon to my button here.

233
00:17:29,410 --> 00:17:32,130
So, that introduces a button.

234
00:17:32,130 --> 00:17:34,980
We're going to look at what this looks like in a short while.

235
00:17:34,980 --> 00:17:36,780
Now, when I click this button,

236
00:17:36,780 --> 00:17:41,140
I want to be able to show and hide these links.

237
00:17:41,140 --> 00:17:43,140
To enable me to do that,

238
00:17:43,140 --> 00:17:50,780
what I'm going to do is to surround this ul with a div here.

239
00:17:51,070 --> 00:17:57,585
So, I'm going to come in and introduce a div around this ul.

240
00:17:57,585 --> 00:17:59,280
And to this div,

241
00:17:59,280 --> 00:18:04,850
I will apply the class as collapse,

242
00:18:04,850 --> 00:18:15,895
and then navbar-collapse, and then I give it an ID as Navbar.

243
00:18:15,895 --> 00:18:20,115
Now, you're beginning to see the correlation between

244
00:18:20,115 --> 00:18:26,300
these classes and the ID and what I declared in the data toggle and the data target.

245
00:18:26,300 --> 00:18:32,750
So, here the data target I specify as #Navbar and so the ID given to this div is navbar.

246
00:18:32,750 --> 00:18:35,640
And I specify the data-toggle as collapse.

247
00:18:35,640 --> 00:18:40,440
Collapse is one of the bootstraps JavaScript components,

248
00:18:40,440 --> 00:18:43,955
which we will look at in more detail in the next module.

249
00:18:43,955 --> 00:18:50,780
So, enclosing this inside the div for small and extra small screens,

250
00:18:50,780 --> 00:18:54,860
this would be hidden by default,

251
00:18:54,860 --> 00:18:56,520
but when I click on the button,

252
00:18:56,520 --> 00:19:01,445
the contents of this div will be revealed on the screen.

253
00:19:01,445 --> 00:19:09,540
Let me also add a mr-auto to the a class navarbar-brand there so that

254
00:19:09,540 --> 00:19:18,775
I automatically introduce a sufficient right margin to this navbar- brand.

255
00:19:18,775 --> 00:19:22,495
Now, let's go and take a look at this in our browser.

256
00:19:22,495 --> 00:19:25,270
Going to the browser, you can now see how

257
00:19:25,270 --> 00:19:31,370
my navbar is collapsed on small and extra small screen sizes.

258
00:19:31,370 --> 00:19:35,925
And notice this button on the left side.

259
00:19:35,925 --> 00:19:38,005
When I click on the button,

260
00:19:38,005 --> 00:19:43,805
the links in my navigation bar are displayed and hidden.

261
00:19:43,805 --> 00:19:51,360
This is the behavior that I want for responsive implementation of my navigation bar.

262
00:19:51,360 --> 00:19:55,375
If I switch to a normal,

263
00:19:55,375 --> 00:20:00,925
larger screen, the navigation bar is completely displayed including the links.

264
00:20:00,925 --> 00:20:07,190
But when I view the same thing on a smaller screen like this,

265
00:20:07,190 --> 00:20:10,430
then the navigation bar links are hidden behind

266
00:20:10,430 --> 00:20:15,020
this button and then will be toggled on and off by clicking on that button.

267
00:20:15,020 --> 00:20:18,190
So that is the responsive behavior that you can

268
00:20:18,190 --> 00:20:22,870
build into your navigation bar on your website.

269
00:20:22,870 --> 00:20:27,285
Now that we have completed the navigation bar on my index.HTML page,

270
00:20:27,285 --> 00:20:32,015
I want to be able to introduce the same navigation bar to the aboutus.HTML page.

271
00:20:32,015 --> 00:20:35,540
Before we get there, let's go to the footer here.

272
00:20:35,540 --> 00:20:38,250
And then you notice that in the footer,

273
00:20:38,250 --> 00:20:39,870
we have these links.

274
00:20:39,870 --> 00:20:43,265
I want to be able to update this link also to point

275
00:20:43,265 --> 00:20:48,450
to aboutus.HTML so that even by clicking the link in my footer,

276
00:20:48,450 --> 00:20:51,090
I would still go to the about page.

277
00:20:51,090 --> 00:20:53,780
Now, going back up here,

278
00:20:53,780 --> 00:21:02,320
what I'm going to do is simply copy this code of this navigation bar from here.

279
00:21:02,870 --> 00:21:13,520
And then, go to aboutus.HTML page and then paste that into my aboutus.HTML page.

280
00:21:13,520 --> 00:21:17,145
Not just that, I need to do some adjustment to this,

281
00:21:17,145 --> 00:21:20,750
because this is now in aboutus.HTML page.

282
00:21:20,750 --> 00:21:25,105
So obviously, there are a few things that I need to update.

283
00:21:25,105 --> 00:21:29,875
First and foremost, this navbar-brand which should lead me back

284
00:21:29,875 --> 00:21:35,485
to my Home page should now be updated as index.HTML here.

285
00:21:35,485 --> 00:21:43,045
And then, the list item here now the second one the Home page again,

286
00:21:43,045 --> 00:21:51,165
I want to update that to index.HTML there and then the second link to the about,

287
00:21:51,165 --> 00:21:53,610
because this is the aboutus.HTML page,

288
00:21:53,610 --> 00:21:58,480
I'm going to put it back to that hash there and then I will remove

289
00:21:58,480 --> 00:22:06,045
the active class from the first item and then apply the active class to the second item,

290
00:22:06,045 --> 00:22:11,520
because this is the About Page and so that should be the one that is highlighted.

291
00:22:11,520 --> 00:22:16,705
Again, going to the footer of the About Page.

292
00:22:16,705 --> 00:22:22,870
In the footer, I will do the same updates to the links here so

293
00:22:22,870 --> 00:22:29,525
the Home Page should lead me back to index.HTML and then let me save the changes.

294
00:22:29,525 --> 00:22:34,740
So now my About Page is also updated correctly.

295
00:22:34,740 --> 00:22:36,390
Going to the browser,

296
00:22:36,390 --> 00:22:41,220
you can now see that I am on my Home Page and then when I click on the about page,

297
00:22:41,220 --> 00:22:42,795
I will go to the About Page.

298
00:22:42,795 --> 00:22:48,710
Note how that same navigation bar is displayed in About Page,

299
00:22:48,710 --> 00:22:51,090
so you have about being highlighted because I

300
00:22:51,090 --> 00:22:53,660
applied the active class to that and then I can

301
00:22:53,660 --> 00:22:58,770
go back to my Home Page either by clicking on the narvar-brand or the Home.

302
00:22:58,770 --> 00:23:02,115
So let's click on the narvar-brand and we are back in our

303
00:23:02,115 --> 00:23:06,210
main or Home Page or index.HTML.

304
00:23:06,210 --> 00:23:13,180
So, now the navigation is correctly set up both in the Home Page and in the About Page.

305
00:23:13,180 --> 00:23:17,810
Couple of additional things that I'm going to do is to apply if you see

306
00:23:17,810 --> 00:23:23,480
it's class that I can change my navbar's color

307
00:23:23,480 --> 00:23:26,340
and also I would like to add

308
00:23:26,340 --> 00:23:32,595
a breadcrumb to this About Page and so that the breadcrumb will also give me another way

309
00:23:32,595 --> 00:23:36,950
of navigating back to my Home Page and also will indicate

310
00:23:36,950 --> 00:23:42,170
the hierarchy in my website where I am at the moment.

311
00:23:42,170 --> 00:23:45,505
So let's do those two steps next.

312
00:23:45,505 --> 00:23:49,835
Going back to that editor in styles.css.

313
00:23:49,835 --> 00:23:52,765
I'm going to add in a couple of more classes here.

314
00:23:52,765 --> 00:23:58,030
You notice that my navbar was hiding part of the jumbotron.

315
00:23:58,030 --> 00:23:59,590
In order to avoid that,

316
00:23:59,590 --> 00:24:01,705
what I'm going to do is to my body,

317
00:24:01,705 --> 00:24:06,110
I'm going to give a padding of 50 pixel on

318
00:24:06,110 --> 00:24:11,505
the top so that those 50 pixels will be left for the navigation bar to cover.

319
00:24:11,505 --> 00:24:14,580
Whenever you are using a fixed top navigation bar it's

320
00:24:14,580 --> 00:24:17,580
a good idea to give this padding to the body of

321
00:24:17,580 --> 00:24:20,270
your webpage so that the navigation doesn't cover

322
00:24:20,270 --> 00:24:24,435
the topmost element in the body of your webpage.

323
00:24:24,435 --> 00:24:29,675
So, the remaining ones I'm going to leave as

324
00:24:29,675 --> 00:24:39,155
zero pixels and also the z-index for my body as zero.

325
00:24:39,155 --> 00:24:43,485
From your knowledge of CSS you understand what the z-index does

326
00:24:43,485 --> 00:24:48,865
and the next one I'm going to do is I'm going to

327
00:24:48,865 --> 00:24:55,580
overload navbar-dark class by adding in one more color for

328
00:24:55,580 --> 00:24:59,750
the navbar class and the color that I'm going

329
00:24:59,750 --> 00:25:06,490
to choose is 512DA8.

330
00:25:06,490 --> 00:25:15,275
This is a dark purple color which looks very good in my website.

331
00:25:15,275 --> 00:25:21,505
Indeed, If you have interest where I found this colors you can visit

332
00:25:21,505 --> 00:25:29,665
www.android.com and then look up their documentation for material design and there,

333
00:25:29,665 --> 00:25:33,325
they have suggestions for how colors can be used

334
00:25:33,325 --> 00:25:38,965
in your Android application but the same thing applies even to a website,

335
00:25:38,965 --> 00:25:46,675
so that is where I went and selected these colors to be used in my website.

336
00:25:46,675 --> 00:25:51,060
So, applying this, now when I do this,

337
00:25:51,060 --> 00:25:55,740
I have to go back to my index.HTML page and

338
00:25:55,740 --> 00:26:01,095
then from the navbar I should remove this bg-primary.

339
00:26:01,095 --> 00:26:09,320
Otherwise, the color that I suggested in the CSS will not be applied to this.

340
00:26:09,320 --> 00:26:14,185
Similarly, go to the aboutus.HTML page and then scroll to

341
00:26:14,185 --> 00:26:20,850
the navbar and then remove the bg-primary from that also.

342
00:26:21,610 --> 00:26:26,580
Now, while I am in aboutus.HTML page,

343
00:26:26,580 --> 00:26:34,080
let me introduce a breadcrumb into my container,

344
00:26:34,080 --> 00:26:36,310
the first row of my container there.

345
00:26:36,310 --> 00:26:39,405
So this is where the About Us title was there,

346
00:26:39,405 --> 00:26:45,120
so there I'm going to go in and introduce an ol.

347
00:26:45,260 --> 00:26:53,560
I'm just using the ol tag as a way of introducing the breadcrumb.

348
00:26:53,560 --> 00:26:59,025
You can use even a div for this and it'll still work just fine.

349
00:26:59,025 --> 00:27:06,050
It just so happens that the example on bootstraps documentation used an ol so,

350
00:27:06,050 --> 00:27:14,030
I'm sticking with that even a simple div will also work fine here.

351
00:27:14,030 --> 00:27:20,895
So, I say ol class col-12 breadcrumb.

352
00:27:20,895 --> 00:27:23,200
So the breadcrumb classes applied and

353
00:27:23,200 --> 00:27:26,825
not the col-12 meaning that stretched the entire screen.

354
00:27:26,825 --> 00:27:33,500
And inside there, I'm going to go in and add two list items.

355
00:27:34,250 --> 00:27:39,625
Now you see why the use of ol is useful here,

356
00:27:39,625 --> 00:27:48,565
because I can use the list items to describe the breadcrumb item.

357
00:27:48,565 --> 00:27:50,725
So, breadcrumb item here,

358
00:27:50,725 --> 00:27:55,020
so I include one breadcrumb item and then inside there I will use

359
00:27:55,020 --> 00:28:02,380
the A tag to define a link back to my Home Page.

360
00:28:02,380 --> 00:28:07,275
So I say, "A" and then to this A,

361
00:28:07,275 --> 00:28:12,010
I give the href as index.HTML and then

362
00:28:12,010 --> 00:28:17,815
include that into my first breadcrumb and then after this,

363
00:28:17,815 --> 00:28:25,660
the next one that I'm going to include is another list item and

364
00:28:25,660 --> 00:28:34,700
the second list item I will apply the class as breadcrumb item and active.

365
00:28:34,700 --> 00:28:40,900
So note the use of the active class here and then inside there I will say "about

366
00:28:40,900 --> 00:28:45,090
us" I don't need a link here because I'm already on the page

367
00:28:45,090 --> 00:28:49,425
so that doesn't need to be included for this list item.

368
00:28:49,425 --> 00:28:51,010
Let's save the changes,

369
00:28:51,010 --> 00:28:54,910
so you can see how the breadcrumb has been introduced into this

370
00:28:54,910 --> 00:28:59,555
particular About Us page here.

371
00:28:59,555 --> 00:29:04,410
Let's go and take a look at the resulting webpage.

372
00:29:04,410 --> 00:29:11,320
Going to my webpage, you can now see that the color of the navbar

373
00:29:11,320 --> 00:29:14,310
has now changed to the dark purple which are introduced

374
00:29:14,310 --> 00:29:17,900
through the CSS and this looks nice on the screen here.

375
00:29:17,900 --> 00:29:20,780
Dark Purple, followed by a lighter purple and then at

376
00:29:20,780 --> 00:29:24,300
the bottom even more lighter purple for my footer.

377
00:29:24,300 --> 00:29:27,240
Well, I am no designer,

378
00:29:27,240 --> 00:29:33,875
but this is the best that I could come up with in terms of adding close to websites.

379
00:29:33,875 --> 00:29:38,660
As you know from history men are colorblind.

380
00:29:38,660 --> 00:29:42,750
So we have very poor taste in colors.

381
00:29:42,750 --> 00:29:48,065
If you're married your wife will definitely remind you about it.

382
00:29:48,065 --> 00:29:52,680
Let's go to the About Page and see what it looks like.

383
00:29:52,680 --> 00:29:55,960
So this is the About Page and in the About Page you can

384
00:29:55,960 --> 00:29:59,520
see the navbar with the correct color

385
00:29:59,520 --> 00:30:06,925
there and note the breadcrumb included in the About Us down here.

386
00:30:06,925 --> 00:30:10,910
So you can see the Home which leads you back to the index page and

387
00:30:10,910 --> 00:30:15,020
then About Us as you saw we applied active link,

388
00:30:15,020 --> 00:30:16,655
active class to this one.

389
00:30:16,655 --> 00:30:19,500
So that's how the About Us is display and the Home Page.

390
00:30:19,500 --> 00:30:23,770
So, this is the default breadcrumb style used

391
00:30:23,770 --> 00:30:29,450
in bootstrap and if I click on the Home Page I will go back to my Home Page.

392
00:30:29,450 --> 00:30:35,585
With this we complete this exercise on navbar and breadcrumbs.

393
00:30:35,585 --> 00:30:42,640
This is a good time for you to do a git commit with the message "navbar and breadcumbs."