Styling the Navbar

[00:00:00]
>> Now that we have all of our markup done, we marked up our links, we marked up the actual semantics behind everything and we've dropped in our SVGs, it looks terrible that's great. That is the very first step to all of this, now we can add more CSS in order to make this pretty.

[00:00:18]
Now as I mentioned to you before, this is eventually going to appear on top of the common image and obviously, you see everything is white up here on the top and so forth. That's great, I don't have that common image available to me here in the navigation. So what I'm going to do here instead, just for the purposes of the work here that we're doing, I'm going to put in another body style right here inside of my navs so I remember to delete it later.

[00:00:48]
And I'm just gonna say background-color of black, which we'll get rid of most things that we were just looking at here. We can also get rid of those borders, I think we're pretty much done with those so we can get rid of the borders on the nav, on the h1, and on the header.

[00:01:06]
You can either delete those or you can comment them out and then with that in place, now we can start to add some additional styles here. So for my header h1, we, You probably don't want this so big. So I'm gonna say my font-size is gonna be an h3 font-size.

[00:01:28]
And we can just use the variable that we already have been using from our previous variable stacks there. So our font-size is the variable of h3, then we're gonna say our font weight is 300 and our margin is 0, which we actually we put in down here at the bottom.

[00:01:50]
I'll just combine those here, we can get rid of this other style. Okay, so for the svgs, we can say header svg and we can say a width of something like 30 pixels is probably good and then svgs don't have a coloured to them the way that text works on the web.

[00:02:23]
So properties like color or background color don't necessarily work with SVGs, what we use instead with them is fill. But we can still use our variables from earlier, so white. Ha, here they are, they do, in fact, exist. Meteor kind of looks like an avocado [LAUGH] Once you see it, you can't unseen it.

[00:02:52]
So these buttons and the SVGs are now, well, like I said the reason we didn't spend a whole lot of time on that is because we knew that we were gonna make other changes and as you can see, sure enough things are not lining up as we expected.

[00:03:05]
So we can make some changes to that as well and the way I'm going to do that is. I'm going to say nav.button And here I'm gonna change the padding on my button it looks a little bit off here by putting nav in front of my button I'm now overriding the styles that I have earlier in my document under just the plain button class.

[00:03:35]
So now that the specifically the button navigation we're gonna change It's padding and it's gonna be four numbers 0.6 rem, 0.4 rem, 0.4 rem, 0.4 rem. So now comes the big question with this, right? What do those four numbers stand for? Does anybody know?
>> Right and bottom.

[00:04:05]
>> Right, exactly, there are some combination of those particular dimensions. So it is top, right, bottom, left, okay? And exactly, those of you who think visually will say, clockwise, right? From top, right, bottom, left, from 12 to 9, right, going around the clock. Those of you who are not visible people like me We say TR, BL [LAUGH], remember, and stay out of trouble, okay?

[00:04:52]
Top right, bottom left either way, that will help you remember what those four numbers are and believe me after 20 years of coding CSS, every time I have to write out top right, bottom left, I'm going TR, BL in my head, okay? That is how I keep it straight.

[00:05:10]
So either one of those mnemonics will help you remember what those four numbers are and what they are representing. And then the last thing here that we need to include In this, of course, is that our variable, Our button is actually already black, I think somewhere along the way it turns white, so let's add this.

[00:05:33]
Even though the text inside of it is already black, let's just add this anyway. We want the text inside of it to be black. Let's add a hover state for these svgs and for doing that, we're going to say header, a hover, svg. So in other words, when we hover over the link, the svg color is going to change and that's going to be a fill of our green.

[00:06:11]
So when we roll our mouse over these, they will turn green on hover and eventually we're going to change these links as well to be white obviously our links are the wrong color. So let's go back down to our nav a here and we're gonna set our color to var white There we go, so there's our white links there my name is still not quite what we want here and so we'll need to add some styles for that as well.

[00:06:45]
So this will be header h1 a and the color will be white, var white And our text decoration none How's that? All right, so we have one final addition to make to our desktop version of this navbar and I have added it here to my header svg. You'll see that I added a margin top of -0.1 rem, and that pulls those icons up just enough that they're now in line with the resume button, looks just a little bit better.

[00:07:35]
Remember margins can have a negative value to them and which in case moves them in the opposite direction. So margin top would normally push things down on the page and negative margin will pull them up. You cannot have negative padding, you only have negative margins, okay. Something to remember there.

[00:07:54]
Okay, so we are actually done with this CodePen, feel free to close it and the next one we wanna move on to, If you go back into your website for the course, we are going to scroll down to where it says tablet and mobile navigation. And so we are going to click on beginning CodePen to start with that.

[00:08:23]
And one of the things that you'll notice as you are working through this particular navbar obviously it looks great when the screen is big. That's exactly what we were looking for a name on one side, all the navigation on the other as I start to squash this up well at some point they wrap on top of each other, that's just normal flexbox behavior that we were out of room.

[00:08:46]
So these are going to stack that's the wrap part of row wrap. Remember we put that in earlier, but that's pretty much where these are gonna stay as the screen gets smaller and smaller and smaller, kind of sub optimal at those smaller screen resolutions. So the shorthand we usually use to talk about this is called tablet and mobile.

[00:09:06]
And I like using those words just because it gives you a visual of a device that we might be talking about that would use these types of dimensions. But the truth of the matter is we're just talking about big screens, medium screens, and small screens. So, you'll hear other people talk about screen sizing in that way.

[00:09:25]
What is the right dimensions for those screens, it depends. Have you seen how many devices are out there these days? And every single one of them has different dimensions for everything. So, what I would recommend that you do is figure out at what dimension, things look good. One of the helpful features the CodePen has, if you haven't noticed it already, look down at the very bottom of the screen on the divider between the code and the display while I move the divider back and forth.

[00:09:58]
Do you see the Sort of white pill that comes up down there and that is a rolling number and it will tell you exactly how wide the screen is at various dimensions. That is a super handy way, I know that I can get this close and at 770 pixels around there, that's where it's going to wrap onto another line, okay?

[00:10:20]
And maybe I don't want it to go all the way this close before it wraps onto another line. Maybe I want a little bit of space before it wraps, so CodePen can help you determine exactly where those points are.