Transcription
[Sara] What's going on?
[McGuire] Whoosh! Whoosh!
It’s a really engaging way to start the lesson.
[Sara] Eh? Sure! But like, let's get to it.
[McGuire] Whoosh! Whoosh! That's one lesson down so far. This is lesson two! (Sara laughing)
And this’ll go really quick, surely. We’ll add our navigation to the page. We'll work through the content. We'll style our nav links, and we're covering a new kind of selector in this lesson called a combo class. Let's start with the navbar. Starting with not having a navbar.
[Sara] Let’s drag in a navbar.
[McGuire] Let’s drag in a navbar. So from our add panel, just like we've done before, we'll find the navbar. Now we'll scroll down, we'll go through all the types of things we can add. And of course, we're looking for navbar. Let's click and drag. There's a few ways to place this. We can click and drag somewhere in the canvas, but we’ll use the Navigator up here to place it right inside the body, right up top. And when we do, we have a navbar.
[Sara] A navbar!
[McGuire] That's it. That's one part down. Let's move into content. Of course, content is going to involve - what? - four different things here. We're going to add…
[Sara] Let's start with logo.
[McGuire] Logo! So we'll go to the assets panel and we'll find Calendar or SpaceX.
[Sara] Eh, Calendar. It’s for a calendar app in space.
[McGuire] Click and Drag Calendar inside. That's one of the four things. Over here, let's double click and edit “Features”. And double click...
[Sara] Request a demo…
[McGuire] “Request a demo”. You're like 5 seconds ahead of me. This is good.
[Sara] And “Sign up for the waitlist”.
[McGuire] “Sign up for the waitlist”.
[Sara] Perfect.
[McGuire] “Perfect”. That is our content. Let's move into styling. So this is for our nav links. So for our nav links - right now, if we change the styles on any one of them, let's scroll down and maybe we want to change, let's see… the font weight. We'll go to bold. Now we bolded this one. Why are the other two nav links not bold? Well, that's because we haven't added the same class. Again, as we know, when we make a style change over here, it'll automatically create a class for us. So let's go over to “Request a demo”, and let's add that class. We'll type nav and we can just click and add nav link, and you can see it's now bold too. We’ll add another one over here, nav link. Now they're all bold. This means changes to any one of them will affect all. So if we hold down Option or Alt and drag size, we can see it's affecting all three of them. Let's undo, put it back to the way we want.
Now, most of the time we want these things to be consistent, but in this case we want this background - the “Sign up for the waitlist perfect” - this background, to be our brand color. What happens with just this one selected? If we go into color and change it to our brand color? Well, it affects all three. That's not what we want. We only want this one to be different. So let's hit undo and this is where we get into combo classes. So what is a combo class? A combo class lets us say, hey, we created nav link - we know we have that class - let's create something more specific on top of the nav link. So what do we do? To the right of nav link we're just going to click in this space right here and we're going to type to create a new combo class, which is why it says “Type to create a new combo class”. Let's call this…
[Sara] CTA!
[McGuire] CTA - call to action. So what did that do? It took all of the properties from nav link. They're still there and it's created a blank slate or a new slate, a new level to build on. So with this CTA selected, we can go in and change the color and it just affects this one. We can go in and change the color of the typography and it just affects this one. What's happening? It's taking all the base styles - all the styling we have in nav link - and it's just layering on top of that the changes that we're creating, or the new additions we're creating in CTA. So what else do we want to change?
[Sara] Let's add some space above the nav links.
[McGuire] Okay, so with any of these nav links selected, notice how if we just change the spacing on this one, it just affects that. That's because we're styling nav link CTA, that combo class. So a better idea is, select either of these, the ones that just have nav link and watch what happens. If we make a change on one of them…if we decrease the padding…notice how it's affecting all three of them. Let's get this to what, ten, nine, eight…
[Sara] Ten! And the margin, top, bottom - ten.
[McGuire] All right. And so margins - some space outside. So what's happening here?
[Sara] That looks good.
[McGuire] It does. It looks great. It's because, the numbers you just said. But if we go over notice how with either of these nav links selected the changes we make - so if we increase the size - it's still affecting the combo class. Now, why did the changes to padding and margin, why did they affect this CTA? Why did that happen? Well, again, the CTA is built on the nav link style, so when we change the nav link, that base style, those changes are affecting this one as well. So if we were to change the font, it's affecting all three. Again, a combo class only builds on that style. You can still change nav link and you can override, you can create more specific properties on a combo class.
So if we're doing that, we might as well go over to Calendar here and do the same thing. We should add some space on the top. Let's go to margin and give it, let's say twelve, thirteen, fourteen…
[Sara] Fourteen.
[McGuire] Fourteen. Fourteen pixels, and that looks okay. Notice how by default if we have two things named Image. So this is a class, this one we styled this created a class called Image. This one also created Image 2, it's a different style. We can name this, we can just say Logo. That's fine and be a little more specific with our class names.
Now, one other thing to notice before we wrap up here, if we select the navbar - so we can see our navbar selected over here - we can change the background color to not gray and instead make it something. What do you think? Like a purple color? Or maybe a pink?
[Sara] I think white.
[McGuire] A fuchsia? You said white.
[Sara] White is fine here.
[McGuire] Okay, We can do white. One more thing - look at this. nav link CTA. Let's create that rounding radius.
[Sara] Three.
[McGuire] Four!
[Sara] No, three pixels.
[McGuire] Three pixels. And that's it. We added our navbar. We configured our content. We styled our nav links. We added a combo class to make sure our primary CTA, our call-to-action, is standing out. And of course we balanced everything with our logo before changing the background color from a light gray color to a white color. Up next, we're going to take it to a whole new level with CSS grid.
[Grimur] Share you navbar progress using #webflow101 on Twitter. Not only will we share our favorites on social, but we’ll also share our favorites on social.