Homepage: navigation

In the previous lesson, we built out our hero section, and a little bit later we’ll make sure it’s fully responsive on all kinds of devices. And, a note to anyone following along, we’ve created clonable projects for each major lesson here. You can clone each step of the project along the way to dig in and see exactly how it’s built. It’s important to note that while we’re talking Sara is in the Figma project, iterating on a light version of this design. But, here’s the thing: because we’re using classes and the same HTML and CSS fundamentals used by the top developers all over the world, we can adapt to these changes right now, or along the way, or even later on. Our designs aren’t set in stone. 

This lesson will go pretty quickly. We’ll add our navbar, we’ll style it, and then we’ll make a symbol. This way we can reuse it on other pages, and it’ll always stay consistent. But, before we drag in the navbar, something to note about classes here, when we started modifying each of these styles, when we started modifying our heading, when we started modifying our text block, it automatically created classes. What this means is, if we copy and paste or even add a new text block later on, and we make a change to any one of them, let’s say we change the padding, let’s say we change the font, let’s say we change the font size, just holding down Option and dragging here, notice it's affecting each instance of this, each text block has the text block class applied. So any time we add the text block class to something, it’ll follow suit. Now, this is terrible. Nobody uses Impact anymore. Let’s remove that font change. In fact let’s just hit Command Z and undo all the way back to the beginning. 

But that's a quick note on classes. Let’s add a navbar element. We can just drag in from components here, and we can place this right in our body. We can actually place things in the navivagor over here. Let’s place it right underneath the page body, and we have some defaults. The first thing we can do is click the container, and we already created a container class too. You can see the container was already created for us when we set that maximum width of twelve hundred. So if we select this, and go in here, and we can just click Container. And now it’s set that same maximum width. In fact, if we make a change here, hold down Option, we drag that maximum width, notice how it's affecting the container up here, and it's affecting the container down here. We can change either of them. Let’s put it back to twelve hundred, and that’s pretty good for the navbar. 

And once we've done that (once we've added the navbar) we can move onto styling the navbar. We can style the navbar however we want to match our hero section. Let’s change some other stuff too. Let’s change the background color, maybe for our background color we can do a solid black. Let’s do that for now. And, these aren’t very legible over here, but we’ll take care of those in a second. Let’s first do our logo. So here’s our logo, .SVG, let’s drag that right into this Brand Block where our logo can be placed. And, it says Megan Garcia Portfolio, we can make that a little bit smaller. Let’s close this out. That looks pretty good, we can always change this later. But, let’s also make sure it’s centered. So with our Brand Block selected, we can add some padding on the top and bottom. And the reason we’re doing this is we want to increase, we want to increase the size of that Brand Block, this clickable link so that when people press it, it takes us back to Megan Garcia’s homepage. So let’s increase that. Looks pretty good at maybe sixteen pixels. And, we’ll make another change. Over here with the links, let’s of course change the color, we can go to a red, we can go to a pink, we can change it to anything we want. Let’s make ours a white color for now. And, we could just apply that same class again (this is the Nav Link class, it was automatically created when we made that change to the white color) and we can apply it to all of these. And the reason - oh that’s not correct - let’s go back in, hit the Backspace, Delete button, and instead make sure we’re doing Nav Link. That’s correct. And if we change the padding on any of them, again it’s affecting the padding on all of them. This is why we use classes. We don’t have to manually style element by element, by element, by element, by element. We just change it once, on the class, and it affects each element that has the Nav Link class applied. So, we can actually delete this one. Let’s change this one to Projects, and this one to Say Hi. Now, we might want the last one to look a little different. In fact, let’s say later on we add another link here, let’s say it says About Me, and we want the third one to be a little different than the other ones. Well, we can create what’s called a combo class, and this is essentially something built on top of the Nav Link class that we created. So we can say this one’s called a Nav Link button. And we can style this one a little different. Maybe we want to change the background color on this to, let’s keep it white, let’s lower the opacity a little bit, and maybe we want to decrease that padding. Maybe round the edges a little bit. Let’s set this to five or six. And maybe we want to add some margin on the top. Let’s say twelve pixels for now. And, something to note about combo classes, again this is Nav Link button, but it’s based on Nav Link. So if we go to any of these that have the Nav Link class applied, we decrease the padding, let’s say we decrease it to, let’s do fifteen on each side. Let’s do fifteen on the left and right, or twenty on the left and right. Notice how this Nav Link button now has twenty pixels. It’s inheriting that. In fact we can click this, this little amber-colored label. We can click, and we can see that it’s value is inherited from the Nav Link. It’s inheriting that even though we created a combo class on top of it. Now, for this design, let’s remove About Me. We used that to demonstrate what the class versus the combo class does, but for now let’s move on to the final step here, which is creating a symbol.

Now, a symbol once created can be used all over the project. Let’s demonstrate by selecting the navbar. Again we can even select stuff from the navigator here. Let’s select the navbar, and with the navbar selected we can go over to our symbols panel, and we can press, Create a New Symbol. And we’ll call this, Navigation. Here’s what happened. Suddenly we’re editing the symbol. But, let’s go back to this particular instance of it. So you can see it’s just an element, it’s turned green here, but let’s copy and paste, just to demonstrate for a second. Copy and paste, that symbol, so we have two instances of the symbol, and we can edit a symbol by double-clicking on it. We double-click to edit the symbol. And when we make a change in here, let’s say, we add a new button, and another button, and another button, notice how what’s happening up here is reflecting any one instance of that symbol. So we’re affecting our navigation symbol. Any one instance that’s changed will affect all other instances of that symbol. For now, let’s delete this project, this project, and this project’s Nav Link. And we’ll go back to the instance. And let’s delete that second navigation symbol. 

But that’s it for navigation. We added the navbar, we styled it, and we made it a symbol so it could be reused as many times as we want. And, we can change these things down the road, but for right now, we’re going to move into one of the most exciting parts of this entire build: a client project section that's driven by visual CMS. This is how you can design one user experience, and different versions of that experience are built out using magic. 

[Sara] And science.

[McGuire] And science.

[Grimur] From my dreams. I can see everything. And I can see your navbar ideas. In my mind. Give me your ideas. Or share you navbar design (whether you’re using a preset or building your own custom navigation) using #21DayPortfolio.