Nav Bar CSS Solution

[00:00:00]
>> Jen Kramer: Moving on, we got the nav bar. So I did my nav bar with inline block. And I'm just gonna go ahead and insert these styles right here. So we have a nav. And this is where we're gonna put our borders. So on that original picture
>> Jen Kramer: We have once again a border on the top and a border on the bottom.

[00:00:26]
And they're those two different colours again. All right, so what we've got going on there, is we can just use nav to do those borders. So border hyphen bottom will be one pixel solid E61F11 and border hyphen top would be one pixel solid DA0090, okay. So that's gonna to give us our lovely borders on the top and the bottom.

[00:01:03]
Right. Okay then NAB UL. What am I gonna do here?
>> Speaker 2: You're gonna take out the bullets.
>> Jen Kramer: Take out the bullets.
>> Speaker 2: By doing text or link style, list style.
>> Jen Kramer: List display style type. List, display, style.
>> Speaker 2: List, style, type. That one.
>> Jen Kramer: Good, none. Two other things.

[00:01:35]
What else do I do?
>> Speaker 3: Margin.
>> Jen Kramer: Margin zero.
>> Speaker 3: And padding zero.
>> Jen Kramer: And padding zero. Just like any other nav bar, you're gonna do this every single time, okay. Then from my nav li, what am I gonna do here?
>> Speaker 3: Display.
>> Jen Kramer: Display inline block, right?

[00:02:05]
If you did this with Flexbox, it's totally fine. You'll have different answers here, but I did mine with inline block, sounds like most people here did as well, okay? And then we can, let's just see what we've got so far, we save that and look at our web page.

[00:02:24]
So that's gonna give us our links and they're all smushed together on the left hand side. So what do we need to do to make that prettier?
>> Speaker 3: Text align?
>> Jen Kramer: We needed to somehow center it right? And what else?
>> Jen Kramer: Maybe a nice little bit of spacing somehow, okay.

[00:02:45]
So what we're gonna do than is nav a.
>> Jen Kramer: So I said text decoration, none. So turn off the underlines under the link will have a color for those links. And that happened to be 73352E. If I'm reading that right, display block. So that's going to expand those links, to occupy the full area, occupied by the li.

[00:03:18]
And we'll put on some padding on these, 0.5rem. 1rem. So remember that's gonna be 0.5rem is where?
>> Jen Kramer: When I put in, it's gonna be on the top and and the bottom right? And whereas 1rem gonna be?
>> Speaker 3: On the left and right.
>> Jen Kramer: On the left and the right.

[00:03:45]
>> Jen Kramer: Okay, so if we look at the page now, there's our links. They're still kind of smooshed on over here to the side. So, I forgot something on the UL, and that would be?
>> [CROSSTALK]
>> Jen Kramer: Text, align center.
>> Jen Kramer: Very good. All right, so now those should be aligned nicely in the center.

[00:04:08]
And then I also added a hover state because right now the hover state turns the underlying back on. That's kind of the way it is at the moment. So what I did was I had a nav a hover. That wasn't actually in the the screenshot that I gave you.

[00:04:27]
But here it is.
>> Jen Kramer: And so I made the background
>> Jen Kramer: Color, black.
>> Jen Kramer: And I made the color, I think it's green b, or 84, 84de37. And if we refresh the page, now I've got this cool sort of hover state going on. And apparently I need to turn off the text decorate, text decoration.

[00:05:04]
Yeah text decoration none. Turn it off here to text. Decoration none. So there we go.