- Read Tutorial
- Watch Guide Video
WEBVTT
1
00:00:00.530 --> 00:00:02.220
Now that we have the structure
2
00:00:02.220 --> 00:00:03.760
of our nav bar built out,
3
00:00:03.760 --> 00:00:06.070
in this guide we're gonna be able to write
4
00:00:06.070 --> 00:00:09.840
the actual styles that are going to format
5
00:00:09.840 --> 00:00:12.300
and create the layout that we're looking for.
6
00:00:12.300 --> 00:00:15.070
So in this guide we're gonna actually see
7
00:00:15.070 --> 00:00:17.490
a completely different nav bar,
8
00:00:17.490 --> 00:00:19.700
look and feel, by the end of it.
9
00:00:19.700 --> 00:00:21.407
So let's get going with that.
10
00:00:21.407 --> 00:00:25.330
I'm gonna open up Visual Studio Code here,
11
00:00:25.330 --> 00:00:28.990
and let's open up the side panel here
12
00:00:28.990 --> 00:00:31.660
and take a look at our style files.
13
00:00:31.660 --> 00:00:36.060
Right now, we have a main file, a portfolio directory,
14
00:00:36.060 --> 00:00:38.020
and then a common directory.
15
00:00:38.020 --> 00:00:41.860
I'm going to also add a new directory here,
16
00:00:41.860 --> 00:00:45.617
and let's just create one called navbar,
17
00:00:46.453 --> 00:00:51.203
and then navbar/base.scss.
18
00:00:52.290 --> 00:00:55.360
And the reason why I'm creating this structure here
19
00:00:55.360 --> 00:00:57.500
is because we'll have the ability,
20
00:00:57.500 --> 00:01:02.280
if we ever wanna add some specific nav bar style files,
21
00:01:02.280 --> 00:01:05.900
we'll have a directory we can put those into.
22
00:01:05.900 --> 00:01:07.270
So now that we have that,
23
00:01:07.270 --> 00:01:10.830
let's make sure that we import that into our main file.
24
00:01:10.830 --> 00:01:13.760
So I'm going to import,
25
00:01:13.760 --> 00:01:15.020
I'm gonna go back one,
26
00:01:15.020 --> 00:01:17.000
or I'm gonna start from that directory,
27
00:01:17.000 --> 00:01:21.330
I'm gonna say navbar and then base.scss.
28
00:01:22.240 --> 00:01:23.670
So that's gonna be imported,
29
00:01:23.670 --> 00:01:27.340
which means that all of the files in our application
30
00:01:27.340 --> 00:01:29.450
are gonna get accessed to that.
31
00:01:29.450 --> 00:01:30.980
So with that in place,
32
00:01:30.980 --> 00:01:34.080
now let's start building out those styles.
33
00:01:34.080 --> 00:01:38.100
And just to kind of show the type of structure
34
00:01:38.100 --> 00:01:41.060
that I usually follow when I am building
35
00:01:41.060 --> 00:01:43.510
my own code implementations,
36
00:01:43.510 --> 00:01:47.730
I'll usually have the files open side by side.
37
00:01:47.730 --> 00:01:49.830
So I'll grab that tab,
38
00:01:49.830 --> 00:01:51.700
and I'll move it all the way to the right,
39
00:01:51.700 --> 00:01:53.010
and the reason I'm doing that
40
00:01:53.010 --> 00:01:56.230
is because then I can have a direct reference
41
00:01:56.230 --> 00:01:59.020
as I'm writing the code to see exactly
42
00:01:59.020 --> 00:02:01.260
how I named those styles.
43
00:02:01.260 --> 00:02:04.830
One of the most common issues that you may run into
44
00:02:04.830 --> 00:02:07.210
when you're writing your style implementations,
45
00:02:07.210 --> 00:02:09.170
if they're not showing up on the page,
46
00:02:09.170 --> 00:02:11.800
is you may just be misnaming them,
47
00:02:11.800 --> 00:02:16.760
or you may have, you may nest one style or one class
48
00:02:16.760 --> 00:02:19.940
inside of an element in your code,
49
00:02:19.940 --> 00:02:23.570
but then you don't add that nesting in your style file.
50
00:02:23.570 --> 00:02:26.970
So when you are looking at both files at the same time,
51
00:02:26.970 --> 00:02:29.610
it makes it a little bit easier to manage.
52
00:02:29.610 --> 00:02:32.590
So I'm going to keep this open here,
53
00:02:32.590 --> 00:02:36.790
and on the left-hand side I'll start writing out the styles.
54
00:02:36.790 --> 00:02:38.530
So the very first thing I'm gonna do
55
00:02:38.530 --> 00:02:41.060
is create our wrapper class,
56
00:02:41.060 --> 00:02:45.210
and we can see that that is nav-wrapper.
57
00:02:45.210 --> 00:02:47.770
Now inside of here, remember how I said
58
00:02:47.770 --> 00:02:50.700
I want to split our nav-wrapper
59
00:02:50.700 --> 00:02:53.820
between a left-hand side and a right-hand side.
60
00:02:53.820 --> 00:02:56.480
The left-hand side is going to contain
61
00:02:56.480 --> 00:02:57.610
all of these elements,
62
00:02:57.610 --> 00:03:00.250
such as our logo, our name, and our nav links.
63
00:03:00.250 --> 00:03:03.950
The right-hand side is just gonna have the logout button.
64
00:03:03.950 --> 00:03:06.900
So inside of here I'm going to say
65
00:03:06.900 --> 00:03:09.870
that I want to display: flex,
66
00:03:09.870 --> 00:03:14.500
and then I'm gonna use justify-content
67
00:03:14.500 --> 00:03:17.650
and say space-between,
68
00:03:17.650 --> 00:03:20.410
and then I'm also gonna add some padding.
69
00:03:20.410 --> 00:03:21.930
So I'm gonna add some padding.
70
00:03:21.930 --> 00:03:25.550
I played around with quite a few padding styles.
71
00:03:25.550 --> 00:03:26.820
I'm actually gonna go with something
72
00:03:26.820 --> 00:03:29.600
kinda specific here, of 38 pixels.
73
00:03:29.600 --> 00:03:33.560
Definitely feel free to use whatever you want to use.
74
00:03:33.560 --> 00:03:36.230
So if I hit Save here, let's see what happens
75
00:03:36.230 --> 00:03:37.840
if I open up Google Chrome.
76
00:03:37.840 --> 00:03:41.430
Now you can see that we have these elements,
77
00:03:41.430 --> 00:03:44.110
and we have our padding here,
78
00:03:44.110 --> 00:03:47.220
and right now you can see our logout button
79
00:03:47.220 --> 00:03:48.960
is on the right-hand side.
80
00:03:48.960 --> 00:03:50.910
So we are achieving
81
00:03:50.910 --> 00:03:54.150
the first basic layout structure
82
00:03:54.150 --> 00:03:54.983
that we're wanting.
83
00:03:54.983 --> 00:03:58.910
We have the elements like the logo on the left-hand side,
84
00:03:58.910 --> 00:04:00.830
logout button on the right, and we have our padding.
85
00:04:00.830 --> 00:04:02.660
So, so far, so good.
86
00:04:02.660 --> 00:04:05.200
What we're doing is coming along.
87
00:04:05.200 --> 00:04:07.970
So now that we have those nav-wrapper styles,
88
00:04:07.970 --> 00:04:11.540
let's get started on that left-side class.
89
00:04:11.540 --> 00:04:14.980
So you can see right here we have a class called left-side,
90
00:04:14.980 --> 00:04:18.130
now let's implement it and make sure that it's nested
91
00:04:18.130 --> 00:04:19.710
inside of our nav-wrapper.
92
00:04:19.710 --> 00:04:23.450
So I'm gonna say .left-side,
93
00:04:23.450 --> 00:04:28.330
and now inside of here, this is also going to display: flex.
94
00:04:28.330 --> 00:04:29.650
And then
95
00:04:30.560 --> 00:04:32.620
after that, let's say that we just wanna
96
00:04:32.620 --> 00:04:34.410
make sure everything is aligned vertically,
97
00:04:34.410 --> 00:04:37.610
so I'll say align-items
98
00:04:38.650 --> 00:04:41.840
and then say that that's gonna be center.
99
00:04:41.840 --> 00:04:44.770
So now if you go and check at Google Chrome now,
100
00:04:44.770 --> 00:04:47.770
now you can see that this is starting to look
101
00:04:47.770 --> 00:04:50.440
like what we wanted it to look in the beginning.
102
00:04:50.440 --> 00:04:53.770
We have our logo, our name, and then our links,
103
00:04:53.770 --> 00:04:56.670
all lined up properly, all right next to each other.
104
00:04:56.670 --> 00:05:00.270
So this is coming along very nicely.
105
00:05:00.270 --> 00:05:03.670
So after left-side, let's add our nav-logo.
106
00:05:03.670 --> 00:05:05.940
So you can see right here we have our nav-logo,
107
00:05:05.940 --> 00:05:10.080
and so I'm gonna say nav-logo,
108
00:05:10.080 --> 00:05:15.080
and for this I'm gonna use a width of 50 pixels.
109
00:05:15.420 --> 00:05:17.330
So coming back, you'll see
110
00:05:17.330 --> 00:05:20.550
that that now has properly selected the logo,
111
00:05:20.550 --> 00:05:25.330
and it's moved it more to the size that we want it to be.
112
00:05:25.330 --> 00:05:27.470
So that's all we need for our nav-logo.
113
00:05:27.470 --> 00:05:29.200
Now let's add our name class.
114
00:05:29.200 --> 00:05:31.230
This one is gonna be a little bit longer.
115
00:05:31.230 --> 00:05:34.710
So I'm gonna say, I want to have that name class,
116
00:05:34.710 --> 00:05:38.510
I want to provide a height of 22 pixels,
117
00:05:38.510 --> 00:05:41.760
and then I want to add a margin
118
00:05:41.760 --> 00:05:45.043
to the right of 40 pixels,
119
00:05:46.250 --> 00:05:48.640
and then I wanna do a margin
120
00:05:48.640 --> 00:05:52.200
to the left of 10 pixels.
121
00:05:52.200 --> 00:05:54.300
I wanna make this uppercase,
122
00:05:54.300 --> 00:05:58.740
so I'm gonna say text-transform: uppercase,
123
00:05:58.740 --> 00:06:03.230
then I'm gonna wanna have a font-size of 1.5rem,
124
00:06:03.230 --> 00:06:07.820
which means it's gonna be 1 1/2 times the standard size,
125
00:06:07.820 --> 00:06:12.320
and then I want a font-weight of 900.
126
00:06:12.320 --> 00:06:14.300
Hit Save and let's see how that looks.
127
00:06:14.300 --> 00:06:15.133
And there you go.
128
00:06:15.133 --> 00:06:17.150
That's starting to look a little bit better.
129
00:06:17.150 --> 00:06:18.810
That looks more of kind of what
130
00:06:18.810 --> 00:06:21.220
you'd want with a brand name.
131
00:06:21.220 --> 00:06:24.220
Obviously, you can use any styles that you personally want
132
00:06:24.220 --> 00:06:25.480
because it's your portfolio,
133
00:06:25.480 --> 00:06:27.360
but that's what I'm gonna go with with mine.
134
00:06:27.360 --> 00:06:29.920
Okay, so that's all we need on the name.
135
00:06:29.920 --> 00:06:32.420
Now we have what's gonna be
136
00:06:32.420 --> 00:06:34.300
our longest class that we're gonna write,
137
00:06:34.300 --> 00:06:37.840
and it's gonna be this nav-link-wrapper class.
138
00:06:37.840 --> 00:06:40.100
And the reason it's gonna be one of our longest ones
139
00:06:40.100 --> 00:06:42.000
is because it is gonna have
140
00:06:42.000 --> 00:06:45.200
the most behavior associated with it.
141
00:06:45.200 --> 00:06:49.830
So I'm going to create that, so it's nav-link-wrapper,
142
00:06:50.810 --> 00:06:53.750
and then inside of here we're going to line up
143
00:06:53.750 --> 00:06:56.930
so it has the same height as that brand name.
144
00:06:56.930 --> 00:07:00.470
So I'm gonna say I want this height to be 22 pixels,
145
00:07:00.470 --> 00:07:01.970
and I'm gonna talk in a minute
146
00:07:01.970 --> 00:07:04.320
on why we're declaring a height here.
147
00:07:04.320 --> 00:07:05.940
There's a reason for that.
148
00:07:05.940 --> 00:07:10.940
So I'm gonna say height, and then I want the border-bottom
149
00:07:11.060 --> 00:07:15.990
to be one pixel, solid, and transparent.
150
00:07:15.990 --> 00:07:17.450
Now that may seem kinda weird.
151
00:07:17.450 --> 00:07:20.010
Why are we creating a border that's transparent?
152
00:07:20.010 --> 00:07:22.490
Well, I am going to show that in a moment.
153
00:07:22.490 --> 00:07:26.730
It's gonna have a really neat style that you're gonna see.
154
00:07:26.730 --> 00:07:28.950
Then I wanna add an animation.
155
00:07:28.950 --> 00:07:31.610
So for that I'll say transition,
156
00:07:31.610 --> 00:07:36.610
and then let's say I want a transition, the border-bottom,
157
00:07:38.120 --> 00:07:42.190
and I wanna make it transitioned over half a second.
158
00:07:42.190 --> 00:07:43.710
So that's gonna be our transition
159
00:07:43.710 --> 00:07:45.490
and then let's add some margin.
160
00:07:45.490 --> 00:07:47.240
So margin,
161
00:07:47.240 --> 00:07:49.720
no margin top or bottom,
162
00:07:49.720 --> 00:07:54.060
but then I do want some margin left and right of 20 pixels.
163
00:07:54.060 --> 00:07:55.640
Okay, hit Save here.
164
00:07:55.640 --> 00:07:56.950
Let's just go take a look at it
165
00:07:56.950 --> 00:07:58.390
and see what that's looking like.
166
00:07:58.390 --> 00:07:59.223
And there you go.
167
00:07:59.223 --> 00:08:01.000
So that is starting to look better.
168
00:08:01.000 --> 00:08:03.450
We don't have our animations in there yet.
169
00:08:03.450 --> 00:08:06.240
These are still our default link styles,
170
00:08:06.240 --> 00:08:07.890
but you can see we do have our spacing
171
00:08:07.890 --> 00:08:10.070
and everything is lined up properly.
172
00:08:10.070 --> 00:08:11.710
So that looks good.
173
00:08:11.710 --> 00:08:15.150
Now inside of nav-link-wrapper,
174
00:08:15.150 --> 00:08:17.730
now we wanna select the links themselves.
175
00:08:17.730 --> 00:08:20.600
Now this is the reason why you,
176
00:08:20.600 --> 00:08:22.360
if you remember from last guide,
177
00:08:22.360 --> 00:08:25.700
I said we were wrapping up our nav-link-wrapper
178
00:08:25.700 --> 00:08:29.440
outside of the link component itself,
179
00:08:29.440 --> 00:08:32.610
and the reason for that is because we wanna select
180
00:08:32.610 --> 00:08:36.660
and add specific styles differently for the link
181
00:08:36.660 --> 00:08:38.950
as compared to the wrapper.
182
00:08:38.950 --> 00:08:43.950
So I have the a tag, and now I'm gonna add a color.
183
00:08:44.010 --> 00:08:46.340
I'm gonna select the gray color.
184
00:08:46.340 --> 00:08:49.800
So if you open up your color list,
185
00:08:49.800 --> 00:08:53.700
remember we added a gray color here as a variable,
186
00:08:53.700 --> 00:08:55.740
so I'm going to select that variable,
187
00:08:55.740 --> 00:08:59.210
say I want these to be of color gray,
188
00:08:59.210 --> 00:09:03.160
and then from there I'm going to add a few more styles.
189
00:09:03.160 --> 00:09:06.240
I don't wanna use that default underline,
190
00:09:06.240 --> 00:09:09.680
so I'm gonna say text-decoration is gonna be none,
191
00:09:09.680 --> 00:09:13.660
and then let's add a transition here as well.
192
00:09:13.660 --> 00:09:17.350
So I'm gonna say transition is gonna be the color,
193
00:09:17.350 --> 00:09:21.230
and then I also want this to be 0.5 seconds,
194
00:09:21.230 --> 00:09:22.590
so half of a second,
195
00:09:22.590 --> 00:09:26.600
and then I want the font-size here to be 1.2rem,
196
00:09:26.600 --> 00:09:30.650
so a little bit smaller than that brand name logo.
197
00:09:30.650 --> 00:09:34.910
Okay, then last thing we're gonna add for our a tag
198
00:09:34.910 --> 00:09:37.170
is we wanna add a hover effect.
199
00:09:37.170 --> 00:09:38.740
So for this hover effect,
200
00:09:38.740 --> 00:09:41.870
I'm going to say, because we're using SASS here,
201
00:09:41.870 --> 00:09:45.560
what we can do is add a ampersand,
202
00:09:45.560 --> 00:09:48.970
a colon, and then from there say hover.
203
00:09:48.970 --> 00:09:52.300
So this is selecting the hover pseudo state,
204
00:09:52.300 --> 00:09:57.300
and when we hover over, we wanna change the color to black.
205
00:09:57.880 --> 00:10:00.410
Hit Save here, and now you can see
206
00:10:00.410 --> 00:10:02.470
that that is looking much better.
207
00:10:02.470 --> 00:10:06.760
So this is looking like an actual professional website now.
208
00:10:06.760 --> 00:10:08.780
And also see, when I'm hovering over,
209
00:10:08.780 --> 00:10:12.090
you see how that color is changing,
210
00:10:12.090 --> 00:10:15.850
and it has a really nice little animation where it fades in
211
00:10:15.850 --> 00:10:20.190
and out as you hover on it and away from it.
212
00:10:20.190 --> 00:10:23.210
So the next thing we're gonna do here is something
213
00:10:23.210 --> 00:10:28.140
that you're not actually gonna see the implementation for
214
00:10:28.140 --> 00:10:30.650
until one of the next guides where we talk
215
00:10:30.650 --> 00:10:33.470
about how we can implement the active state,
216
00:10:33.470 --> 00:10:36.650
but for right now let's at least create the style for it.
217
00:10:36.650 --> 00:10:39.680
So we're outside of our a tag,
218
00:10:39.680 --> 00:10:42.750
so this is gonna be nested in nav-link-wrapper,
219
00:10:42.750 --> 00:10:46.910
which is another reason why we created that wrapper div,
220
00:10:46.910 --> 00:10:49.010
and now we're gonna create something
221
00:10:49.010 --> 00:10:54.010
called the active-nav-link.
222
00:10:54.060 --> 00:10:55.560
And so what this is gonna do,
223
00:10:55.560 --> 00:10:59.360
this is going to have the ability
224
00:10:59.360 --> 00:11:02.830
to see when we're on one of these pages.
225
00:11:02.830 --> 00:11:05.880
So say, when we're on the About page right here,
226
00:11:05.880 --> 00:11:10.360
I wanna actually have a cool, little bottom border
227
00:11:10.360 --> 00:11:12.780
around this link when we're on the About page.
228
00:11:12.780 --> 00:11:16.220
When we go to the Blog page, I wanna have that link,
229
00:11:16.220 --> 00:11:18.840
and I also wanna change the color of the text.
230
00:11:18.840 --> 00:11:21.280
So we are gonna be able to see
231
00:11:21.280 --> 00:11:22.920
how that works in a little bit,
232
00:11:22.920 --> 00:11:25.490
but for right now we're just gonna write the code for it.
233
00:11:25.490 --> 00:11:27.940
So for the active-nav-link,
234
00:11:27.940 --> 00:11:32.940
I'm gonna say that now we're gonna use a bottom border,
235
00:11:33.520 --> 00:11:34.700
or a border-bottom,
236
00:11:34.700 --> 00:11:38.700
and this is gonna be one pixel, solid, black.
237
00:11:38.700 --> 00:11:42.290
So this right here, that bottom border,
238
00:11:42.290 --> 00:11:47.290
this is the reason why we needed this transparent border.
239
00:11:47.390 --> 00:11:49.870
The reason for it is because if we didn't have
240
00:11:49.870 --> 00:11:53.250
that transparent border, what would happen
241
00:11:53.250 --> 00:11:57.130
is that we would actually, as we hover over,
242
00:11:57.130 --> 00:11:59.130
then it would actually move,
243
00:11:59.130 --> 00:12:02.270
and you'd see one of these links kinda bounce up
244
00:12:02.270 --> 00:12:05.640
because the border wasn't there previously
245
00:12:05.640 --> 00:12:06.750
and then we added it.
246
00:12:06.750 --> 00:12:09.530
That would not be a good user interface.
247
00:12:09.530 --> 00:12:11.880
So we have a transparent border there
248
00:12:11.880 --> 00:12:14.370
so that when we use the active-nav-link,
249
00:12:14.370 --> 00:12:16.870
then it'll actually show up.
250
00:12:16.870 --> 00:12:20.160
So that's the reason why we have that there.
251
00:12:20.160 --> 00:12:22.610
So I'm gonna use a bottom border of one pixel,
252
00:12:22.610 --> 00:12:27.350
and then I'm going to add a color here,
253
00:12:27.350 --> 00:12:29.120
and the color is gonna be black,
254
00:12:29.120 --> 00:12:31.540
and I'm also gonna make sure this is important,
255
00:12:31.540 --> 00:12:32.940
which means it's gonna overwrite
256
00:12:32.940 --> 00:12:37.700
any of the other link styles that were previously there,
257
00:12:37.700 --> 00:12:39.500
such as that gray style.
258
00:12:39.500 --> 00:12:43.730
And then we're going to add some padding to the bottom
259
00:12:43.730 --> 00:12:45.430
so that we don't want the border
260
00:12:45.430 --> 00:12:47.480
to simply look like an underline.
261
00:12:47.480 --> 00:12:49.070
We actually want it to have
262
00:12:49.070 --> 00:12:50.910
a little bit space between the links.
263
00:12:50.910 --> 00:12:54.907
So I'm gonna have some padding-bottom of eight pixels.
264
00:12:54.907 --> 00:12:59.740
And then inside of this, not the active-nav-link,
265
00:12:59.740 --> 00:13:04.270
but actually inside of the nav-link-wrapper,
266
00:13:04.270 --> 00:13:06.190
so make sure that you have this.
267
00:13:06.190 --> 00:13:09.160
So you have your nav-link-wrapper starting here,
268
00:13:09.160 --> 00:13:12.530
and you have your active-nav-link here.
269
00:13:12.530 --> 00:13:14.440
Make sure you break out of that
270
00:13:14.440 --> 00:13:17.210
and then we're gonna add another hover state.
271
00:13:17.210 --> 00:13:19.130
So here we're gonna say hover,
272
00:13:19.130 --> 00:13:23.163
and then we're gonna add a border-bottom,
273
00:13:24.000 --> 00:13:25.890
or a bottom border once again,
274
00:13:25.890 --> 00:13:28.070
and then we're gonna change this
275
00:13:28.070 --> 00:13:31.170
to be one pixel, solid, black.
276
00:13:31.170 --> 00:13:32.700
So what's gonna happen here
277
00:13:32.700 --> 00:13:36.970
is these two layers of bottom-border for active-nav-link
278
00:13:36.970 --> 00:13:38.540
and for this hover state,
279
00:13:38.540 --> 00:13:41.010
they're actually going to expand.
280
00:13:41.010 --> 00:13:43.700
So when you hover over one of the items,
281
00:13:43.700 --> 00:13:45.530
it's actually gonna be two pixels
282
00:13:45.530 --> 00:13:47.840
'cause they're gonna sit on top of each other.
283
00:13:47.840 --> 00:13:51.470
So that's gonna be kind of a cool look and feel.
284
00:13:51.470 --> 00:13:54.410
Now that's everything we need on the left-hand side.
285
00:13:54.410 --> 00:13:56.520
Now we need to go the right-hand side.
286
00:13:56.520 --> 00:13:58.680
So we need to make sure we're nesting this properly.
287
00:13:58.680 --> 00:14:01.280
So I'm gonna see where our left-hand side
288
00:14:01.280 --> 00:14:04.290
is closing out, which is all the way,
289
00:14:04.290 --> 00:14:06.690
it's the second to the last curly bracket,
290
00:14:06.690 --> 00:14:09.190
and then now I'm gonna add the styles
291
00:14:09.190 --> 00:14:12.030
for the right-side class,
292
00:14:12.030 --> 00:14:13.760
and here it's gonna be pretty basic.
293
00:14:13.760 --> 00:14:15.760
We're simply gonna say right-side,
294
00:14:15.760 --> 00:14:18.030
we're gonna grab the links inside of it,
295
00:14:18.030 --> 00:14:22.410
we're going to use color: primary, so it's that teal color,
296
00:14:22.410 --> 00:14:27.410
and then I'm gonna use a transition of 0.5 seconds,
297
00:14:27.630 --> 00:14:31.440
once again, and then I'm gonna use ease-in-out,
298
00:14:31.440 --> 00:14:35.070
or ease-in, just like, there we go, ease-in-out,
299
00:14:35.070 --> 00:14:37.630
and then I'm gonna add a hover effect.
300
00:14:37.630 --> 00:14:42.630
So once again, &:hover, and then I'm gonna change the color,
301
00:14:43.710 --> 00:14:46.730
and I'm gonna use dark-primary,
302
00:14:46.730 --> 00:14:49.310
and we're also gonna switch the cursor.
303
00:14:49.310 --> 00:14:50.980
If you've never done that before,
304
00:14:50.980 --> 00:14:52.870
because notice something right here,
305
00:14:52.870 --> 00:14:55.880
let's go test this out so I can show you before and after.
306
00:14:55.880 --> 00:15:00.290
So notice when we're using the nav links, notice how we have
307
00:15:00.290 --> 00:15:03.430
that nice, little cursor changes to the pointer.
308
00:15:03.430 --> 00:15:05.570
But when you come to the logout,
309
00:15:05.570 --> 00:15:10.090
it actually switches to the little text cursor.
310
00:15:10.090 --> 00:15:11.800
That's not what we want the link.
311
00:15:11.800 --> 00:15:13.500
That's not really a good user interface
312
00:15:13.500 --> 00:15:16.130
'cause users aren't gonna know that that's a link.
313
00:15:16.130 --> 00:15:20.173
So what we wanna do is to overwrite that value,
314
00:15:20.173 --> 00:15:22.040
and so we're gonna say when you hover over,
315
00:15:22.040 --> 00:15:26.690
switch the cursor to be the pointer, just like that.
316
00:15:26.690 --> 00:15:29.070
That's how you can overwrite that value.
317
00:15:29.070 --> 00:15:33.760
And now if you come over here, logout is now the cursor
318
00:15:33.760 --> 00:15:36.160
just like we have with these other elements.
319
00:15:36.160 --> 00:15:39.450
So we're not gonna worry about the font-sizing yet
320
00:15:39.450 --> 00:15:41.330
because we're eventually gonna get rid
321
00:15:41.330 --> 00:15:45.440
of this logout button link, or the actual text,
322
00:15:45.440 --> 00:15:47.610
and we're gonna switch this and use icons,
323
00:15:47.610 --> 00:15:50.030
but we're not gonna worry about that for a few guides.
324
00:15:50.030 --> 00:15:54.930
So we have right now a really nice start for our styles.
325
00:15:54.930 --> 00:15:58.210
So we now have our logo, our brand name,
326
00:15:58.210 --> 00:16:01.480
and then we have each one of these links,
327
00:16:01.480 --> 00:16:04.840
and they're working really nice, so I'm happy with that.
328
00:16:04.840 --> 00:16:07.000
Now in the next guide, what we're gonna do
329
00:16:07.000 --> 00:16:10.410
is we're gonna see how we can take these links
330
00:16:10.410 --> 00:16:13.260
and how we can add active state to them.
331
00:16:13.260 --> 00:16:15.850
So just like you see the About link right here
332
00:16:15.850 --> 00:16:17.280
when you hover over it,
333
00:16:17.280 --> 00:16:20.390
when you're on this page, or users on this page,
334
00:16:20.390 --> 00:16:23.240
we wanna tell them what page they're on,
335
00:16:23.240 --> 00:16:25.170
and so we're going to be able
336
00:16:25.170 --> 00:16:28.230
to maintain this style right here.
337
00:16:28.230 --> 00:16:31.083
So we'll take care of that in the next guide.