In this video, we're going to build the navbar. If you remember, 1
navigation bar is a premade component in Webflow, which we can drag right on the canvas from here. 2
And we can style it as we want it. 3
Here is a hidden Webflow trick. 4
Press CMD/CTRL+E, you'll get this quick find bar. 5
Here you can search all the elements and find assets and much more. 6
You can search navbar and drag it directly to the page or just hit enter and will insert automatically. 7
Okay. 8
So what do we need to do with the navbar? First thing that I notice is the container size. 9
Navbar is using a default container width off 950 pixels or something like that. 10
If you remember, last time we've used a different container. But what is the container size 11
we want to use? That's quite simple to find out. 12
We just need to measure the container in Figma, which is exactly the full width of our grid. Draw a rectangle 13
over it and see what's the width of that rectangle. 14
That's 1160 pixels. 15
Now what do we need to do in Webflow? 16
We just need to take the container and give it a new max width size. 17
Why are we giving it max width and not the regular width? 18
Because regular width isn't responsive. 19
We want it to shrink when a screen shrinks. And a regular width will 20
keep it at 1160 pixels. 21
And no matter the screen size. And there we have it. 22
We have a new CSS style named Container that has max-width of 1160 pixels. 23
Next, we need to change the background. 24
Our navbar in the design is transparent. 25
That's easy to change. 26
Select the entire navbar, not just the container and change the color to transparent. 27
OK. 28
Now let's add the logo. 29
We need to export it from Figma first. We're going to export it as SVG file because for vector 30
based images it's the best file format. 31
It's a small file size and it never loses quality, no matter how much you stretch it. To insert the logo 32
inside the brand box, 33
we need to first drop the image element. 34
Do you see what I did here? 35
Quick find, 36
then search for image, 37
and because I had brand element selected, it dropped right inside when I hit enter. 38
Next lets style the links, 39
but first we need to add the font to our project. 40
We're using a Google font called Cabin. 41
It's not inside the list of fonts here. 42
So we have to add the font from the project settings. 43
We can access that page from this link here. 44
It will take you exactly to the right place. 45
I think we're using most of the font styles, so let's add all of it. 46
And done. 47
Now we can go back to the designer and start building or designing. 48
If you kept the designer tab open, make sure to refresh it after you add font so the font shows up 49
in the dropdown. 50
Now the obvious way to apply a font to something is by selecting the element and changing the font. 51
But this is not utilizing the full power of HTML and CSS. 52
If we apply a font style on something high level, then it will be inherited by all of the children. 53
The highest element in the hierarchy is the body, we can access body from the navigator. 54
Once you have body selected, go to the selector field and from the dropdown select body. When you select 55
the body tag, you'll see some of the font styles aren't blue. 56
That means, some styles have already been applied to it 57
by default. We can change the font to Cabin here. 58
Now every new element heading, paragraph, tags will all be Cabin by default. Until we override them. 59
Why is this approach superior to changing fonts directly on each element? 60
Well first, saves time. 61
But second, just by changing on the body tag, we can edit the font on the entire website with a couple 62
of clicks. 63
That's it now 64
nav links are inheriting font from the body tag. 65
You can even click on this orange link and it will tell you that it's inheriting the style from the 66
body tag. 67
Now lets style the rest of the properties on the links. 68
Change the color to white from here. The other links weren't styled. 69
Why's that? 70
Because we don't have a style class applied to them by default. By changing the color on the first one, 71
Webflow created a new style class automatically and called it a nav link. 72
Now we can take that class and apply it on other 2, so all the changes apply to all of them. 73
We have 5 nav links in the design. And one of them is a button. 74
Let's change the sizes of the links to match the size of the button. 75
If we select one of them and check the spacing properties, you'll see that their sizes are determined 76
by padding. 77
If we change this padding values to match the button in our designs, then we'll get the matching size. 78
The padding of the button in the designs is 12 vertically and 20 horizontally. 79
Let's style the last link to turn it into a button. 80
We just need to add a background and round the corners. But we cannot just style it right off the bat, 81
can we? 82
It has the same class as others, so it's going to edit all the links. 83
What do we do? The combo class, 84
of course. Go to the selector field and type a new name next to the nav link. 85
That's going to give it a combo class. 86
CSS isn't case sensitive, so it doesn't matter if you use uppercase or lowercase. 87
I prefer using lowercase, to save time. Webflow capitalizes automatically. 88
I suggest using lowercase. 89
It's faster to type. And also you'll see difference between styles that were created automatically, by 90
Webflow, and those that you created and manually. 91
All right. 92
So what are the properties of our button? 93
It had a white background with 20% opacity and 4 pixel rounded corners. 94
This A, for Alpha, is how you can set the transparency on a color. 95
Put 20 and there you go. The rounded corners have to be applied from here, under Border radius. 96
Excellent. Let's fix the spacing now. Links in our designs are 30 pixel from the top edge. 97
We can create this in Webflow in two ways, either by adding 30 pixel margin on top of the container, 98
or adding a 30 pixel padding to the navbar itself. 99
The result is the same thing, but second one is better. 100
Why? 101
Because container is a class that we are going to reuse elsewhere. 102
So it's best to keep it intact. 103
Navbar class, on the other hand, is going to be used only in the navbar so we can safely style it 104
as we want. As you can see logo isn't centered. 105
It's barely noticeable if you don't see the boundaries of the container, but we can't ignore such details. 106
We want our websites to look pristine, a work of art. 107
So how do we center the logo in the middle? 108
Anytime you need to move or position something, always start by thinking margins and padding. 109
These properties will cover majority of cases. 110
We can just add a top margin on top of the logo and that's it. 111
I'm just measuring with an eye here. 112
our navigation links, don't have any hover effect on them right now. 113
This makes the navbar dead and not very fun to interact with. 114
Last time, we added an underlying border to the links, this time we can do something different, something 115
simpler like change of color. 116
Here's one of the simplest, quickest yet effective hover effect, 117
you can use on many different interactive elements. 118
Just change the opacity on hover. 119
How do we apply the hover effect to elements? From hover state, which can be accessed right here. 120
Let's change the opacity to 80% 121
and there. 122
This simple effect works on the bottom too. 123
Let's add a transition effect, so the hover change is nice and smooth. 124
This needs to be added on a regular state, not the hover state, but it will affect the hover. 125
You'd expect that it's editable inside hover effect, but it's not. 126
That's how CSS works in this case. 127
There is probably a logic behind it. 128
Let's test the desktop responsiveness. Not the mobile's, 129
we'll do that in the end. The navbar is glued to the edges when we shrink the screen. 130
So we need to add some padding to it. 131
There. 132
That's better. And that's it. 133
Navbar is looking good. 134
We'll finish the hero section in the next video. 135
Stick around.