Horizontal Navigation Bar Styling

[00:00:00]
>> Jen Kramer: So to save a little bit of time, let's go on ahead and copy the styles that we just created here.
>> Jen Kramer: And if you refer back to your web page, I've given you a horizontal navigation mark CodePen, go on ahead and open that up and you can fork it.

[00:00:20]
And I'm gonna paste in the same styles that I just had for my horizontal navigation, or sorry for my vertical navigation bar and pasting those same styles in. Because actually, there's not much we need to change to make this go horizontally. What we need to do in order to make this go horizontal is actually the same kind of trick that we just used.

[00:00:40]
We use this trick to take our inline element and we turned it into a block to fill the whole entire button, right? There is another property for display that we can apply to our li's, in order to make this go horizontally on the page as well and this is a different one, it's called display inline block and we're gonna put that on the li.

[00:01:07]
That's it, we're done. One property, you just made a horizontal navigation bar, okay? Now you can go ahead and tweak it and make them the right size. It's lapping on to another line cuz my screens not that big. But you see here on the nav li, what I did here is I changed my display property to inline block.

[00:01:27]
That's a weird one, okay? You know inline, you know block. Now we have one called inline block. [LAUGH] It's kind of the best of the inline world, with the best of the block world matched together. Basically, this is going to allow you to put these navigation buttons all next to each other, but still maintain some of the properties like the width of these navigation buttons.

[00:01:55]
Yeah.
>> Speaker 2: And the wrapping is a CodePen thing, not a or just will the browser will automatically do that, or?
>> Jen Kramer: Yeah,
>> Speaker 2: Is the code pen automatically doing that?
>> Jen Kramer: No, this is a browser, well, it's actually my screen size, what I have here projected for my screen size.

[00:02:11]
If I reduce the width of my buttons, let's say I make them eight ligne wide, they're all going to go on one line.
>> Jen Kramer: Okay? And if you were doing this in real life on a web page you probably wouldn't make enough bar with buttons this honking big.

[00:02:26]
These are really big.
>> Jen Kramer: But it was fun, wasn't it?
>> Jen Kramer: Okay, so that's as simple as it is to make a horizontal versus vertical navigation bar. The thing you need to add to make it go horizontal is this one line right here. Display inline block, put on the li, okay?

[00:02:49]
And you can style things up.
>> Jen Kramer: All the rest of it on your own.
>> Jen Kramer: How's everybody doing?
>> Speaker 2: So, what does that, line of code essentially mean, like you're turning each link or each part of the list in the navigation bar is now inside of a block, which is the full length of the web page?

[00:03:11]
>> Jen Kramer: Yeah, so inline elements as you know they go next to each other, so we can line up inline elements forever after. So that's the inline portion of inline block, we're gonna stack these things next to each other in space.
>> Speaker 2: Put every in line element into a block?

[00:03:27]
>> Jen Kramer: So our lis, we're gonna put them one after another horizontally in space and there's some block level properties that those lis, are gonna maintain as well.
>> Jen Kramer: Like the ability to have width, and be able to put margin, and padding on all the sides. That those kinds of properties from the block world apply, but putting everything next to each other from the inline world applies, and that's what makes inline block.

[00:03:54]
I wish they came up with a better name.
>> Speaker 2: Yeah.
>> Jen Kramer: I really do. [LAUGH]
>> Speaker 2: What I'm looking for is like a translation in English that helps you remember to do that [LAUGH].
>> Jen Kramer: Yeah, just think about it as the nav bar property. This is where inline block gets used a lot is on nav bars.