Aligning Navigation Items

[00:00:00]
>> Jen Kramer: So here in my nav, the first thing that I'd like to do is, if you notice here, the hamburger button is kinda small. And it would probably look better if it was bigger, and if it was probably next to the LayOut Times and My Web Design Destination.

[00:00:20]
>> Jen Kramer: Yeah, okay, so one of the things that I could do here to make that happen would be to, right after my header here, I'm going to add this, a div with a class of row.
>> Jen Kramer: And then close that,
>> Jen Kramer: Down here after that a, the a that we have in here with the icon and our open main menu item here.

[00:00:58]
So now what I have is I have a header, yeah, with two children here. Right, I have a div with a class of row, and a div with a class of logo. So now, I'm totally able to work with these and make these two line up next to each other.

[00:01:18]
>> Jen Kramer: Okay, so let's go ahead and write our CSS for this. So after my header here, then, I could go ahead and put in some additional styling.
>> Jen Kramer: I'll stick it up here, after this big, long comment up here at the top. The CSS that you see here already is the pretty stuff.

[00:01:39]
It's those pretty borders, it's turning off the navigation bullets. It's making it go horizontal on the page at desktop dimensions, it makes it stack at mobile dimensions. So that's what we have going on here at the moment. Notice we also have some other things in here, I'm particularly proud of this line here, line 50.

[00:02:03]
Okay, so we're putting in two little bars in between each of these, and so what we said is, basically, after each li, but not the last child. So on one line of code, we've managed to go ahead and put in all the bars exactly where we want them.

[00:02:20]
You could also write it this way, two ways, right? The two styles after and then last child after, yeah? Okay, so that's what we've got going on down here, in other words nothing, we need to mess with, it's just making nav bars pretty. Okay, so here we'll go ahead and say header.row.

[00:02:40]
And I'm gonna go ahead and say display: flex and flex-flow: row nowrap, cuz I don't want this one to wrap, and what is this gonna do for me?
>> Speaker 2: Make it one line.
>> Jen Kramer: Make it one line, right?
>> Speaker 2: That doesn't wrap.
>> Jen Kramer: So it's gonna put the div with the class of row and the div with the class of logo right next to each other, aren't they?

[00:03:13]
>> Speaker 3: I think we want logo to be inside of row in the HTML, though, right, if we want them both on the same row?
>> Jen Kramer: Let me just double-check.
>> Jen Kramer: Yes.
>> Speaker 3: Need two flex items in there.
>> Jen Kramer: Yes, sorry, thank you very much, I misplaced my closing div here.

[00:03:32]
>> Jen Kramer: Okay, so we've got div after the logo.
>> Jen Kramer: Okay, so we've got our div with a class of row.
>> Jen Kramer: We have this first child here, right, the a starts here and it doesn't end until down here, so that's one child. The second child is logo, which starts here and it ends there on line 25, so line 22 to 25 is the logo.

[00:03:59]
Okay, sorry, very easy to lose track of those closing divs, as you all know. Okay, so now this should put it next to each other, right? If we go ahead and save our HTML, save our CSS, and we take a look at our web page here, those two should be now next to each other.

[00:04:17]
So there they are next to each other, okay, still not pretty, but at least they're next to each other, that's a victory.
>> Jen Kramer: Okay, so then we have some other styles we need to add. Let's go on ahead and add our screens reader only style, sr-only. And this is something of an incantation at this point, I think.

[00:04:38]
You pretty much copy this out of Bootstrap, I think is what everybody does. Cuz when I read this, I was like, yeah, that's Bootstrap, so it's the usual stuff. position: absolute, width: 1px, height: 1px, padding: 0, margin: -1px, overflow: hidden,
>> Jen Kramer: clip: rect(0, 0, 0, 0),
>> Jen Kramer: And border: 0.

[00:05:19]
This is basically every possible way that you can hide something on the page. There it all is, that's screen reader only, okay, so whatever your browser will understand. It'll understand one of those, and magically, the thing won't be hidden on the page anymore. Okay, now let's get into some more interesting stuff.

[00:05:38]
We have our menu-toggle, that's our actual button here. Right, so where's menu-toggle, so this is the a here. This is going to affect that and potentially its children, which would be our Font Awesome button here. So let's go on ahead and set our color to black,
>> Jen Kramer: And we'll give it a little bit of a margin.

[00:06:08]
>> Jen Kramer: We can also make it change colors,
>> Jen Kramer: Oops, menu-toggle:hover,
>> Jen Kramer: menu-toggle:focus, what is focus?
>> Jen Kramer: Anybody?
>> Speaker 4: When it's tabbed.
>> Jen Kramer: When it's tabbed, when it's tabbed, yep. And the color here will be, c85028, which is a lovely shade of orange.
>> Jen Kramer: Okay, so again we come on back, take a quick peek of what's going on.

[00:06:53]
There it is, it's black, when we roll over it, it turns orange. Somewhere along the way, I made that bigger, but not yet.