- Read Tutorial
- Watch Guide Video
So if I click on say the about page right here, we should have this stay dark and stay underlined. If you look at the final version, if you click on about me you can see how this is still underlined and it's a darker color. So, we can take advantage of the React routers active class prop in order to do that.
We're going to add the spacing, add a few more styles to this navbar, and then we'll also work on those active classes. So let's switch back into visual studio code right here and I am going to start by adding some styles to the .nav-link-wrapper.
So in addition to the transition, let's add a margin-right of... let's go with something like 20 pixels and then I also want to have these all be uppercase but I don't wanna go and actually type home, about, contact, all of those in uppercase lettering.
So what I can do is use text-transform and then say uppercase and then let's also decrease the font size slightly. So I'm gonna say font size 0.9, and that's gonna be rem. So what I'm doing here is I'm taking the traditional kinda 100% and I'm gonna say give me around 90%.
So let's hit save here, and come back and look at that, this is starting to look pretty nice. Now if you think it looks a little bit different than what we have right here it's partly because for these tutorials one of the top feedback items I've gotten, starting years ago when I started creating these types of guides, was that students really liked having all of the content zoomed in to make it as easy as possible to see.
So right now I have this zoomed in as you can see here to 67% and I have our portfolio at 100%. So if I were to place these both at 67% you'd see that the size is actually identical to what we have right here. But I'm gonna move this back up to 100% just so it's very nice and easy to see.
Now that we have these let's also work on that active class. So I'm going to switch back to visual studio code here and let's take a look at this prop. We have this active className and the name we gave was nav-link-active and so the way that this works with React router is as you are navigating throughout the site, it looks to see what page you're on and if you're on one of these pages like the about page or the contact page, then what it's going to do is it's going to trigger this active link.
We've talked about it a little bit before but now you're actually gonna get to see how it works. So I've copied that and let's come and let's see kinda the best place to put this, we have our nav-link-wrapper and let's just see if we can just put it right here down below. I'm gonna say nav-link-active, and so what I wanna do here is a couple of things. I first want to trigger the black text, I essentially want to mimic everything that we have going on the hover effect, that's really all we're looking to do.
So the first thing I'm gonna do then is add this bottom border of one-pixel black and then I also want to transform the link. So I'm just going to copy this but we don't need all of these styles, I don't need the color, or the text-decoration, or even the hover or anything like that.
I just want color black and let's see if this is gonna give us exactly what we need. So it looks like we're close, if I click on home you can see it's added the border but we still are missing the link style for the about and I think I know why.
It has to do with just how pure CSS works, this doesn't have anything to do with the way that this works for React. Our nav-link-active is being triggered but then this a link is actually overriding it. So all I have to do to fix that is let me put this down below even the hover effect here and now if I hit save and come back, let me hit refresh and it looks like we're still running into a little issue.
I'm not going to edit this out or anything, I wanna show you exactly how I would debug this if I was working on this 'cause I can tell you that you are gonna run into situations where you think that you've implemented the right code and then you find out it's not working on the page, that is something that happens to me daily. So let's walk through how to debug this.
So we can see our hover is working, so let me right-click, click inspect here, and now if I come and see this style. I have nav-link-active, so we know that that is triggering and if I come here I see nav-link-active and this bottom border is triggering but the actual, oh okay... I see what the issue is.
Now before I actually go and fix it, let's walk through it because that's gonna help you as you debug your own applications. Do you notice how our nav-link-wrapper here wraps up the a tag? It is not on the a tag so it has to do with the way our selectors work.
We have this nav-link-wrapper but the nav-link-active is actually inside of that. So if I come over here, you can see we have the nav-link-wrapper and we're treating this exactly the same as if we had another a tag inside of it but we don't, we actually just need, there's a couple of options and let's walk through both of 'em.
The first one is to keep the nav-link-active exactly where it is but then remove that nested a selector. So if I do that, that definitely fixes it and that's perfect. See if I click on contact, that works, blog, about, and home, those are all working perfectly.
Now the other thing that I could do is I could take nav-link-active and remove it so it's no longer nested inside of the nav-link-wrapper and then I could add my a selector here and go through that process but I think it's perfectly fine and probably the most natural to keep this exactly where it is at.
So this is part of the reason why I really like SCSS is that if I were to come back and perform any debugging or need to change some styles later, I can look at my nav-link-wrapper here, I can see that what the styles are gonna be with the links. I can see what the hover effect is gonna be and then I can see even what the nested styles such as the nav-link-active are gonna be as well.
So that is all saved and I'm just gonna do one more refresh just to make sure everything's working and whoops it isn't. You see when we click on one of our nav-bar items and move our mouse off, there are two borders that appear. You might be wondering why this is happening. Basically the two borders are not ending up in the same position. There are many ways to fix this issue, but I just want to add a little bit of padding to the .nav-link-active. There we go, just 5px is all we needed and now let's make sure everything is working.
Yes, we are getting the exact kind of behavior that we're looking for. You can come to the final version and see that's exactly what everything is supposed to be doing, so I'm happy with that.
We now have our navigation all set up and in the next guide, we're going to clean up the top portion so that we will finish out the entire nav wrapper.