Inside of our nav-wrapper is where I'm going to place this, and because we're using Scss we have the ability to implement our own nesting. So let's come to the navigation-container.js, and what I wanna do is style each one of these nav links here.

So the way I'm gonna do that is I'm gonna create a wrapper div here, so I'm going to create this div and I'm gonna give it a class name, let's just call it nav-link-wrapper, and then I'm going to close that off. So each one of these nav links should have a wrapper div, and that simply gives us the ability to have more control over how the nav-link wrapper styles are going to behave.

The reason why I'm adding this className here as opposed to the nav-link component itself is that if you look at the design, the final design that we wanna implement, do you see these kinda cool little underlining process?

This may look like it's a traditional CSS underline, but it is actually a border, and so in order to get that kind of behavior, and now do you see where it almost kinda looks like it's kind of sliding in and out and fading in and out, and how the line is not directly underneath the text? The way that you can do that is by actually using a border instead of an underline, and so we'll walk through exactly how to do that, and we're also going to add our active classNames there as well.

Now that we have this nav-link wrapper, let's just go and populate it for all of the other links. So that is gonna be the about me page, and then we'll do it for the contact. Make sure you're closing off each one of your divs or else you're gonna get a nasty little error, and that's all we need.

We're not gonna worry about this button here, in fact, we can get rid of it for right now. Later on, once we get into authentication, we'll see how to implement that. So those are all of the nav-link wrapper classes that we need.

If you come here, you can see nothing's actually changed. So, let me hit refresh, and there we go. Okay, so since the last time we recorded, if you look at the date, that was yesterday, so now you can see that we have each one of these are now stacked on top of each other.

The reason for that, it simply goes to the basic styles with how HTML works. If you have links that are all right next to each other, or in the case of HTML, if you just stack links right on top of each other, then what's gonna happen is when it gets rendered, when the page gets rendered, they'll all be right next to each other, just like it was before, but when you have a div here, what that does is it places them automatically on new lines, and so we can fix this by simply adding a flex container for this left side component.

So before we style these, let's go and let's do that. So in our navigation.scss file, let's come and say for left-side, I'm pretty sure that is the name of the class, let's make sure, yes, so we have left side, I want to make this display flex, hit save, and now you can see we're back to having them right next to each other,

and we'll add the ability to have spacing there later on so you'll have some space between each link, but for right now, let's go, and let's start adding our regular styles.

Now, you may think that with the nesting that we'd wanna put our nav-link wrapper inside of the left side component or inside that element, but I don't wanna do that, because that would mean that the styles we apply here, if we ever want to add any links on the right-hand side, those wouldn't be applied or we'd have to duplicate them.

So what I wanna do is for the selector, I'm actually going to pull it out and it's gonna be in the nav-wrapper, but it's not gonna be inside of that left side component. So let me copy this and come back down, we have our nav-link wrapper, and now let's go and let's start adding a few of the styles and see kinda where we're at with it.

So I'm gonna do a height of 22 pixels. So remember, because this is a wrapper, we can actually dictate how tall each one of those divs is going to be. So I'm gonna give it a height, and then I want the border-bottom to be one pixel solid and transparent, and if you remember back to the HTML, CSS, flexbox, and CSS grid course, if you remember, whenever you add a bottom border like we're doing here, if you want to add a hover effect as we have in the final solution, you see where when I hover over it adds this bottom border?

If we didn't add a transparent one, then we would have these items jumping up, and that is definitely not what you want. So it's gonna start with the bottom border, but it's going to be transparent, and then I also wanna add an animation. So let's say I want this to have a transition, and let's try out a half a second, and then we can do ease in out. So if you're not very familiar with transitions, this is a nice and easy way of implementing an animation.

navigation.scss

.nav-link-wrapper {
    height: 22px;
    border-bottom: 1px solid transparent;
    transition: 0.5s ease-in-out;
}

So any time something happens, in this case, it's gonna be a hover effect, then we're going to be able to apply this transition here.

So now that we have that, let's hit save, and let's just see what that gives us. Let me inspect it and make sure that everything there is working. I have my nav-link wrapper, and if I hover over here, you can see we have the nav-link wrapper, it has a height of 22 pixels, border-bottom, and it has that transition.

So it's not exactly a lot to see right now because what we're doing is more of setting the foundation, but now that we have that in place, now we can do some other things. So let's first go and let's remove that underline, so because we're inside of the nav-link wrapper, I can say a, so it's gonna select all of the links inside of the nav-link wrapper, and let's just set a color, so I'm gonna give a color here of black, and I want the text-decoration to be none.

navigation.scss

a {
    color: black;
    text-decoration: none;
}

Hit save here, and you can see that it's working.

So now we don't have that ugly purple type of color, and what we wanna do now is dictate what happens when there is a hover effect. So, for right now, we can just do something pretty basic, we can always come back and add other styles later. But let's say that I want to add a hover here, and I want to add a border-bottom, and we can just copy what we have right here.

So border-bottom, but instead of it being a color of transparent, let's say that we want it to be black.

navigation.scss

&:hover {
border-bottom: 1px solid black;
}

So hit refresh, if it doesn't refresh automatically, and now you can see, look at that, that is working.

So now when you hover over, you have the border-bottom, and this is not an underline, this is not the traditional underline, that is now working, and it even has that really nice little fade in and out because we applied the transition.

So great job if you went through that, that's all I wanna get accomplished in this guide, and in the next guide we'll get it a little bit closer to the look and feel that we have over here, and we're gonna learn about Scss variables.

Resources

• Source Code