Styling Navbar Links

[00:00:00]
>> All right, so the next thing to do to get this navbar looking a little bit better, let's work on some of the styling for our links. So we're gonna go to a nav a, which will style all of the states of our links at this point in time.

[00:00:16]
And so that would be the unvisited links, the visited links, it actually covers the hover state of these, and the focus state of these, and the active state. So in case you're not clear what all those things are, all right, of course, unvisited, you haven't visited the link, visited you have.

[00:00:34]
Hover, you're probably familiar with, that would be your mouse is hovered over it, remember that there is no hover on a mobile device. Focus might be when you're not as familiar with. Focus is, if you are tabbing through your web page, usually your browser by default puts a box around whatever is selected, that's an accessibility thing, again, and that's what focus is for.

[00:00:56]
And then active, that one is a real old school one, it used to be important back in the day when we were all on dial up. That is the moment between the link is clicked and before the next page loads, does the link change color so that you know the next page is coming.

[00:01:11]
As you might imagine on a 2400 baud modem, it really makes a difference to know that that link was actually clicked, and the next page is coming. In our world of broadband, that particular link state is much less relevant and valuable. But by just saying nav a, you're actually covering all of those states all at the same time.

[00:01:31]
So that's appropriate for navbar because we don't really wanna see necessarily that you have or haven't visited a link in the navbar. So we're gonna say color, and maybe that's var(--white);. So the white that we had programmed before. And we can say text-decoration: of none, again, this is a navbar, so by the placement on the page, by the nav element, we have identified this as a series of links.

[00:02:05]
So it is less important that they are underlined or we can turn that off. And then the last part here, which I think is really important, is display: block;. Now, you might be wondering why I am doing that. So by default, the a element is an inline element, it's as wide as its content, that's actually what we want most of the time.

[00:02:28]
If we're reading a paragraph of text, we only want the link to be as big as the words that we select. But in the case of a navbar, we want our link to fill the full clickable area. We do not wanna have that type of environment where you are trying to hover over something, and you have to hover over just the text if the nav element is very large on the page.

[00:02:54]
You want all of that area to be clickable, the way you get that done is by setting the display to block, that is the best way to do it. And then finally, we'll set our nav a:hover, color: var(--magenta). Okay, so now we have some links we can hover over them, they're looking the way we want, okay?

[00:03:23]
But again, we can make the display really, really big here, everything is on the same line. So the last trick that we need to have here is have your name show up on its own line. Does anyone have any suggestions about how we might make that magic happen?

[00:03:42]
How could we make just your name show up on its own line?
>> Title?
>> Maybe, but not here. Okay, so what we're going to do is, we're gonna add a style here, I'm gonna put it just after the nav UL, and I'm going to say nav Li:first-child.

[00:04:05]
Because my name is indeed the first child inside of that list, it's the very first link in the list, okay? Or the first list item in the list, specifically. And for this particular one, remember that flex-box is all about parents and children. The UL is our parent, we've declared all kinds of properties on that UL.

[00:04:30]
The Li then, takes on different flex-box properties. And in this case, one of those properties is the flex-basis properties. Flex-basis has to do with how wide, so to speak, an element is. The difference between width, as a CSS property, and flex-basis, if of course, first of all, flex-basis can only be used with flex-box.

[00:04:53]
But second of all, flex-basis is a little squishy, it's the flex in flex-box. When we give width the value, if we said the width is 25%, the width will always be 25%, it will never be 24.9%, it will never be 25.1%, it will always be exactly 25%. When we say 25% on our flex-basis, it's a kind of kinda thing.

[00:05:23]
So it might be a lot more than that, it might be a lot less than that, whatever is going on with the flex in flex-box, so flex-basis is your property. So here in our nav Li:first-child then, we'll set our flex-basis to 100%, and that will automatically push that onto its own line, okay?

[00:05:47]
And then all we have to do is say, text-align: center. And if it's not obvious why that worked, remember my favorite debugging trick in CSS is always to put a border on it. So if we said 1 pixel solid red, see how that Li is filling the entire row all by itself, and without that text-align: center, the text is simply over to the edge of the box.

[00:06:19]
When we add that text-align: center, we're just saying take the text and stick it in the center of the line, so there it is, okay? And then you can get rid of your debugging border.
>> I don't understand the logic of collect flex-basis 100%. Can you go over that again, I may have missed it.

[00:06:39]
>> Yeah, sure. So flex-basis indicates that we're going to try to get as close to some number as possible, whatever number it is that we happen to specify. By the way, flex-basis is written in two different ways, one is the way that I have written here. The other way is flex, sometimes you see it this way, like whatever, 0, 1, 100% or 0, 0, 100%, something like that, that is flex-grow, flex-shrink, and flex-basis, okay?

[00:07:17]
So I have called mine out just simply as the flex-basis property by itself. Does that help you at all, have you seen the other notation? And maybe that's where your confusion is coming from.
>> Yeah, it's my first time seeing the other notation, too. So basically, what it does is that it tells that we need to occupy 100% of the log space.

[00:07:40]
>> Yes, exactly. So this particular one Li, I want it to occupy whatever space is available 100%. All of the other ones, project, about, contact, etc, clearly they have to go to another line because they can't exceed 100%. And they will take up whatever space is available to them before they wrap onto another line, right?