23. Adding the underline - Responsive CSS Tutorial

I'm gonna come here so not all websites will include something like this but it is quite common to have something that shows you what page you're actively on am i on the home page the about page the recent post page or something like that and as I mentioned it does involve an extra class so I'm gonna come over here under my index and on my home I'm gonna come in and I'm gonna add a class and I'm gonna call it current page you will often see people call this active so this is the active page the problem I have with that is the active we have it's on a link and we active is a pseudo class for her link for when we're clicking on it so people get really mixed up or they think they can style the active state of a page by using that pseudo class and it's not at all how it works the active if you remember it's when you're clicking on it so I like either using current or current page I'm gonna use current page because I think it's super obvious what it is and I'm going to keep that in mine stuff here and actually I put a big typography comment there and I never kept those going so while we're here let's just really quickly do that this would be layout and my nav is sort of a sub component of the layout so for that I'm just going to do a navigation like this instead of having it as a big section so we're gonna have our navigation and inside of my navigation Styles this is part of it we have my current page sometimes you'll see the current page is styled as a different color so you could literally at this point come in and say color and change the color of it and you can see that that is now red but it's gonna keep that hover color but we have my color and we can change that in this case we don't want to change the color what I want to do is I want to add an underline underneath there's two different ways of doing it one of them is with something called a pseudo element and that just complicates matters a little bit and we're gonna get into them much later on because they're super useful for decoration but we can get away with just using a border so if I have order I can say it's a one pixel solid and I can set the current color that we're using and to make it the same as my text whoops I made a mistake though it's on all the sides and we haven't done a lot with borders so I'm gonna show this one to you is because you might have forgotten that we can just do a border bottom and now it's only gonna put that underline on the bottom now if you find it's a little bit too close to the text itself you can also come through and add a little bit of padding the one thing I wouldn't do is only add the padding to the current page I would add it to all the pages and this is in general a good idea for your navigation anyway because if somebody's on a mobile version of your site they have to click with their fingers padding makes your button a little makes that nav link a little bit bigger and it makes it easier to click on so if I come on here I might do padding 0.25 m and 0 on the left and the right you don't have to do the 0 on the left and the right the only problem is this border grows to match that padding on the left and the right side for the mobile reason that I just explained it's probably better but for now I'm just going to leave that as a zero so the underlined match is and it does still give us a little bit of extra room for what we can click on and the last thing that I'm going to look at right now though is we want something like this to show that it's an interactive element this is technically an interactive element because it's a link to my home page still but I'm already on this page so why would I click on it again so even though it's still gonna stay as a link I don't really want it to look like it's a link like I want these two to look so what I can do is actually say that my current page hover has a color that is back to my default color because they don't want it to change and if I do that now when I'm hovering on top it's not changing I know in the scrim above video you just see it as like a blue pointer arrow but if you're looking at it in your own it would be a hand cursor so it is people will still know it's interactive but it's sort of double hinting at them that we probably don't want to click on that because we're already there so it's like an extra hint along the way whereas these ones it's really obvious that those are things that we might want to click on and visit so with that done I think it's looking pretty good in the next video let's look at how we can actually make this on the left side and throw this over onto the right side and then after that we can actually make the whole thing risk