WEBVTT

00:00:06.930 --> 00:00:09.290
Now creates our navigation bar.

00:00:09.630 --> 00:00:10.750
So what are we going to do.

00:00:10.750 --> 00:00:17.850
We're going to create the navigation bar and we're going to leave the scroll ASPI until the end.

00:00:17.850 --> 00:00:21.480
Once we have created all the sections of our website.

00:00:22.070 --> 00:00:22.570
OK.

00:00:22.770 --> 00:00:29.860
So to create the navigation bar we're going to use the nav tags.

00:00:30.990 --> 00:00:31.570
OK.

00:00:31.650 --> 00:00:39.710
So inside the knapsacks we going to have a container or day of class contain

00:00:45.230 --> 00:00:53.240
or contain a fluid if you want to go with the full width of the page.

00:00:53.630 --> 00:00:54.450
OK.

00:00:54.510 --> 00:01:00.900
And then inside this container we are going to have a couple of elements.

00:01:00.900 --> 00:01:05.870
So we are going to have the header which represents the brand and the toggle button.

00:01:06.150 --> 00:01:12.630
And then we're going to have the collapsible contents which refers to the collapsible elements inside

00:01:13.470 --> 00:01:16.140
our navigation bar.

00:01:16.360 --> 00:01:17.290
OK.

00:01:18.360 --> 00:01:18.660
So

00:01:21.690 --> 00:01:23.320
we're going to have a couple of days.

00:01:23.640 --> 00:01:33.320
So the first one is going to be the header and then the second one is going to be the collapsible concept

00:01:33.730 --> 00:01:34.820
.

00:01:35.430 --> 00:01:36.080
OK.

00:01:36.630 --> 00:01:44.790
So the nav tag we're going to give it a roll of navigation.

00:01:45.120 --> 00:01:48.870
Also we're going to give it a fluke a few classes.

00:01:48.870 --> 00:01:49.200
So

00:01:52.290 --> 00:01:54.420
Also we're going to give it a few classes.

00:01:54.530 --> 00:01:55.240
Ok.

00:01:55.500 --> 00:01:58.960
So now.

00:01:59.850 --> 00:02:02.470
OK to sign it.

00:02:02.740 --> 00:02:06.200
We're going to go for now by default

00:02:10.620 --> 00:02:14.550
and to make sure that the navigation bar is fixed audits up.

00:02:14.580 --> 00:02:20.570
We should add nav bar fixed top.

00:02:21.860 --> 00:02:22.950
OK.

00:02:23.850 --> 00:02:24.280
OK.

00:02:24.390 --> 00:02:31.290
And we're going to give it an ID my love bar.

00:02:33.420 --> 00:02:37.210
So we'll use the I.D. later for the cross by.

00:02:37.520 --> 00:02:39.360
OK.

00:02:39.420 --> 00:02:42.400
Now let's move to the container.

00:02:43.080 --> 00:02:44.790
OK.

00:02:44.820 --> 00:02:46.570
Let's go to the header.

00:02:46.740 --> 00:02:52.050
So they a is going to have a class level head.

00:02:53.210 --> 00:02:56.170
OK.

00:02:58.750 --> 00:03:06.060
And the collapsible content is going to have a class

00:03:09.290 --> 00:03:10.260
Navar collapse

00:03:14.940 --> 00:03:18.000
and collapse.

00:03:18.000 --> 00:03:22.400
So we're going to give you an idea to link it link it to the toggle button.

00:03:22.490 --> 00:03:26.820
So let's call it another bar collapse.

00:03:27.000 --> 00:03:27.690
OK.

00:03:27.690 --> 00:03:33.240
Now let's go back to our head and creates our brand and our talk about it.

00:03:34.140 --> 00:03:36.630
So let's start with the brand.

00:03:36.800 --> 00:03:42.270
So it's going to be a link.

00:03:43.030 --> 00:03:43.830
OK.

00:03:43.870 --> 00:03:51.930
We're going to give it a glass of bar right.

00:03:53.060 --> 00:03:53.630
OK.

00:03:53.650 --> 00:03:58.220
Let's play some text inside the link.

00:03:58.230 --> 00:04:03.010
Complete web development of course.

00:04:03.010 --> 00:04:04.130
OK.

00:04:05.130 --> 00:04:06.320
OK.

00:04:06.570 --> 00:04:09.360
Then we need to create the toggle button.

00:04:09.510 --> 00:04:14.430
So we're going to use the button tag.

00:04:16.710 --> 00:04:28.020
So you can give is a type button and we need to give it a class of non-battle.

00:04:29.770 --> 00:04:33.600
OK we're going to use the some data as attributes here.

00:04:33.690 --> 00:04:43.240
So you get to use a data target which goes to the collapsable content.

00:04:44.320 --> 00:04:54.460
Read the number sign followed by the ID of the collapsable content but the targets of our button also

00:04:54.460 --> 00:04:57.520
we need a data to go.

00:04:58.740 --> 00:05:03.310
But we're going to set to collapse.

00:05:05.220 --> 00:05:06.780
OK.

00:05:10.940 --> 00:05:15.050
All right let's have a look at our navigation bar.

00:05:16.150 --> 00:05:21.640
OK so now let's create these bars inside the single button.

00:05:21.710 --> 00:05:26.010
So we're going to create a few spanne elements.

00:05:27.140 --> 00:05:39.300
OK so each spring is going to have a glass of like on bar like this.

00:05:39.750 --> 00:05:46.680
I we have three combos and usually we add another part at the beginning

00:05:59.630 --> 00:06:03.600
for excessive technologies.

00:06:03.740 --> 00:06:10.340
So we're going to play some text inside toggle navigation

00:06:13.900 --> 00:06:16.970
and to make it hit and we're going to give it to a class.

00:06:17.060 --> 00:06:19.360
It's early.

00:06:21.130 --> 00:06:26.850
OK.

00:06:32.020 --> 00:06:32.640
All right.

00:06:32.810 --> 00:06:42.740
So now if we refresh the page in just OK so we see those have any of all content inside our navigation

00:06:42.740 --> 00:06:47.580
bar so legist the collapsible contents and then we can test if the MUSSEN is working.

00:06:48.020 --> 00:06:54.780
So inside the collapsible contents we're going to create a list.

00:06:54.960 --> 00:06:58.650
OK let's we're going to push through the right hand side.

00:06:59.540 --> 00:06:59.810
So

00:07:04.140 --> 00:07:10.130
I mean it creates an ordered list.

00:07:11.990 --> 00:07:16.580
So I'm going to give it a class.

00:07:16.580 --> 00:07:20.560
Love love love.

00:07:21.200 --> 00:07:22.020
OK.

00:07:22.610 --> 00:07:24.150
And I'm going to try.

00:07:24.240 --> 00:07:25.480
All right.

00:07:25.840 --> 00:07:26.240
OK.

00:07:26.390 --> 00:07:28.010
We're going to have an issue with this class.

00:07:28.160 --> 00:07:28.610
OK.

00:07:28.610 --> 00:07:33.950
So we're going to do this on purpose just to show you how it works.

00:07:34.040 --> 00:07:38.270
And then we're going to replace it with another class that's going to work better for us.

00:07:38.270 --> 00:07:41.900
OK so we're going to have three items.

00:07:43.210 --> 00:07:44.390
OK.

00:07:44.420 --> 00:07:49.710
Inside each list item we're going to have a link.

00:07:49.720 --> 00:07:50.190
So

00:07:54.170 --> 00:07:58.940
when we load the page the first list item is going to be active.

00:07:59.480 --> 00:08:02.880
We're going to give it a class on it.

00:08:03.360 --> 00:08:09.760
And these links they are going to take us to the different sections of our website.

00:08:10.130 --> 00:08:18.490
So we're going to have three sections home about and promise so we can place the HFS from now.

00:08:19.010 --> 00:08:23.600
So the first elements are the first section is going to have an ID.

00:08:24.860 --> 00:08:26.240
The second one

00:08:29.870 --> 00:08:31.390
is not active.

00:08:31.550 --> 00:08:32.430
Let's play some.

00:08:32.470 --> 00:08:36.970
And it's going to take us to the About section.

00:08:37.360 --> 00:08:41.560
And the last one is going to take us to the promised section.

00:08:42.460 --> 00:08:45.410
OK.

00:08:45.440 --> 00:08:52.160
So let's save and refresh the page.

00:08:53.140 --> 00:08:54.320
OK you don't see

00:08:58.110 --> 00:08:58.620
lists

00:09:07.730 --> 00:09:09.730
so we need to add some text to our links.

00:09:09.740 --> 00:09:17.120
So the first one is going to be home and then.

00:09:17.750 --> 00:09:18.320
And

00:09:22.100 --> 00:09:25.930
that's INSIDE in cycling.

00:09:26.780 --> 00:09:31.110
And finally our promise.

00:09:32.780 --> 00:09:34.070
OK.

00:09:34.870 --> 00:09:35.090
OK.

00:09:35.090 --> 00:09:38.370
So now we can see links there.

00:09:38.510 --> 00:09:39.330
OK.

00:09:39.530 --> 00:09:41.030
If we read a page

00:09:44.330 --> 00:09:50.420
we would use the width of the page and you can see our toggle button if you click on it we can see our

00:09:50.420 --> 00:09:50.990
links there.

00:09:51.080 --> 00:09:52.010
OK.

00:09:52.010 --> 00:10:01.850
So the problem with using full rights is that when we click on the button and we show the links in small

00:10:01.850 --> 00:10:03.170
devices.

00:10:03.290 --> 00:10:07.300
These links they are pushed to the right and we don't want that.

00:10:07.310 --> 00:10:08.190
OK.

00:10:08.510 --> 00:10:17.340
So in big devices it is working fine because we can see that the list is pushed to the right.

00:10:17.400 --> 00:10:22.040
OK but it's not fine here because it does not fit.

00:10:22.310 --> 00:10:30.180
So to fix this we're going to change the class pool right to nav bar right.

00:10:30.520 --> 00:10:31.370
OK.

00:10:31.380 --> 00:10:33.750
And now it works fine.

00:10:34.740 --> 00:10:34.940
OK

00:10:44.820 --> 00:10:51.310
all right now let's style our navigation bar so to do this we're going to be using CSSA to save time

00:10:51.320 --> 00:10:54.620
we can use a navigation bar CSSA generator.

00:10:55.220 --> 00:11:02.790
So if you go to Google and type navigation bar see as his generator bootstrap you get many results there

00:11:02.810 --> 00:11:03.040
.

00:11:03.320 --> 00:11:12.510
And if you go to this Web site W3 musses and il then you can see a real nice tool there.

00:11:12.830 --> 00:11:15.180
So all you need to do is fill these BBS's.

00:11:15.290 --> 00:11:21.680
So the color corresponds to the background color of our navigation bar the link color is the color of

00:11:21.680 --> 00:11:25.430
the links and also called the active link color.

00:11:25.460 --> 00:11:29.610
So for the background color we're going to go for a nice dark blue color.

00:11:29.990 --> 00:11:32.810
We want the links to be gray color.

00:11:33.000 --> 00:11:36.140
And when they are Occy want them to become white.

00:11:36.650 --> 00:11:41.690
So let's do this so for the color we're going to go for a dark blue color.

00:11:41.740 --> 00:11:43.300
So take an answer.

00:11:43.310 --> 00:11:52.630
The navigation is going to get updated the link color we want it to be gray and the actively color you

00:11:52.690 --> 00:12:03.340
want wanted to be white civic legal under or click on generates your love but then you can see our other

00:12:03.790 --> 00:12:04.870
good.

00:12:05.030 --> 00:12:12.020
So let's copy the code by clicking on the copy button.

00:12:12.020 --> 00:12:15.850
And let's go to our siestas file.

00:12:15.950 --> 00:12:23.010
So we're going to paste the code right at the end because it's quite a big piece of code.

00:12:23.550 --> 00:12:34.050
And let's just take the comments in the big Asian bar and place it on top of this code.

00:12:35.080 --> 00:12:36.690
All right.

00:12:36.800 --> 00:12:43.430
So in the code we are referring to the navigation bar styling using the glass nav bar custom so will

00:12:43.430 --> 00:12:45.170
need to go back to the index.

00:12:45.210 --> 00:12:54.610
But it's a symbol file and change the defaults on have by default style to bar custom.

00:12:55.490 --> 00:12:56.980
OK.

00:12:57.710 --> 00:13:01.750
Now if you go to our Web site we can see our navigation bar that.

00:13:01.850 --> 00:13:03.220
OK.

00:13:03.530 --> 00:13:08.650
So of course our links great column for the links and wine for the active links.

00:13:08.660 --> 00:13:10.240
So are you going to make a few changes there.

00:13:10.340 --> 00:13:16.240
OK so we're going to make the law brand white.

00:13:17.390 --> 00:13:19.910
And also going to increase the font size.

00:13:20.340 --> 00:13:22.700
OK.

00:13:22.850 --> 00:13:29.570
And if you look at this one it will change the color when you have it and it's all the love brand.

00:13:29.800 --> 00:13:35.500
And in our final Web sites it just keeps one's going to do as well.

00:13:35.900 --> 00:13:36.190
OK.

00:13:36.290 --> 00:13:36.590
So

00:13:43.730 --> 00:13:46.230
let's go to our cities file.

00:13:46.660 --> 00:13:50.300
And first of all it's increase the font size

00:13:56.630 --> 00:13:59.180
to 18 pixels.

00:14:00.430 --> 00:14:01.840
OK.

00:14:02.750 --> 00:14:10.200
And also let's change the color of the brand.

00:14:12.290 --> 00:14:12.640
OK.

00:14:12.680 --> 00:14:13.720
Here it is.

00:14:13.730 --> 00:14:17.700
So we're going to change that to a white color.

00:14:17.990 --> 00:14:23.030
And also we harvest state to white color as well.

00:14:23.650 --> 00:14:28.630
Well it's an obligation bar looks fine.

00:14:29.060 --> 00:14:31.550
OK.

00:14:31.550 --> 00:14:37.190
Now we can change the font family OK and we can do that for the whole page so we're going to go to the

00:14:37.190 --> 00:14:37.880
body elements

00:14:40.580 --> 00:14:45.470
and we are going to set the font family there.

00:14:45.920 --> 00:14:48.590
So let's select the body.

00:14:49.550 --> 00:14:55.820
So we're going to use a Google funds called Walk On.

00:14:56.600 --> 00:14:58.150
OK.

00:14:58.190 --> 00:15:01.240
And then as a fallback we're going to go for it.

00:15:02.250 --> 00:15:11.450
It's OK to rights the family all the funds from me like this without quotes but it's OK to of course

00:15:11.510 --> 00:15:12.520
if you would.

00:15:13.010 --> 00:15:13.950
OK.

00:15:14.180 --> 00:15:20.960
Now this is a Google fund so to use it will need to go to the Google funds Web sites

00:15:20.970 --> 00:15:27.510
.

00:15:32.840 --> 00:15:40.990
And if you do control if you can look for walk on.

00:15:41.430 --> 00:15:41.850
OK.

00:15:41.870 --> 00:15:49.190
If you scroll down and get more results there if you search again

00:15:52.170 --> 00:15:57.620
and is carry on.

00:16:00.160 --> 00:16:00.530
OK.

00:16:00.530 --> 00:16:01.470
Here it is.

00:16:01.490 --> 00:16:06.780
So if you click on the button creakier is there.

00:16:06.790 --> 00:16:10.590
If you scroll down you will see this link.

00:16:11.160 --> 00:16:15.700
There you get a copy paste into our website.

00:16:16.220 --> 00:16:22.520
So if you go to the index those HMO file like we did in the company website's products we're going to

00:16:22.520 --> 00:16:25.180
place this link in there.

00:16:26.570 --> 00:16:32.040
So we we were using our vote for the various Web sites and they were using Walkmen.

00:16:32.410 --> 00:16:32.780
OK.

00:16:32.780 --> 00:16:34.490
So it's safe.

00:16:34.640 --> 00:16:44.730
You can see that of course the rights font family for our Web sites like