In this video, we're going to add Navigation bar to our page. Webflow has a default navigation bar element 1
called Navbar. 2
This is one of the premade Webflow elements I do like to use. Which we can add from the Elements panel 3
under the Components section. Drag it to the top to bring it on top of the hero section. 4
Navbar already comes with elements inside. 5
Let's have a look exactly what's this Navbar made of. 6
So inside the parent Navbar element, 7
we have a container. 8
This container is similar to what we did with our hero content, centered in the middle with a maximum 9
width, so elements are nicely wrapped inside it. 10
Then inside that, we have 3 other elements, which again are boxes. 11
First one, the brand, sits on the left. 12
That's where we put the logo. 13
Nav Menu is where these 3 navigation links are sitting. 14
Like most other things, that's just a regular Div Blog, but with some default styles already applied to it. 15
We're able to change these styles if we want to. 16
And third, we have menu button, but it's invisible. 17
You can see here that there is a Display None applied to this item, 18
so it hides. Menu button is invisible only on the desktop. On other devices is visible and you can see 19
why. It's a hamburger icon that drops down the hidden navigation links. Which you're probably familiar 20
with, because that's what most of the Web sites have. Fitting navigation links on mobile devices is difficult. 21
We use this hidden navigation menu and the hamburger icon that contains those links. 22
Navbar acts just like any other HTML element in Webflow. 23
But it also has some extra options inside settings. 24
There is an option to open and close the menu. Menu is basically what's hidden in mobile devices. In desktop 25
version, 26
this doesn't do anything, because menu is visible at all times. 27
There are 3 types of menus in here. Drop Down, which is the default. Right side and Left side menu. 28
I mainly use the default drop down option. 29
Underneath there are options for Easing. 30
This is relating to the animation. Easing is an animation that starts slow and then accelerates. 31
This is how most animations on the web are set. But more about this later, in entire section dedicated 32
to interactions and animations. 33
I leave all these settings on default. Only thing that I use here is the open and close menu, so I can 34
visually style the menu. Another useful setting 35
here can be the display options for the menu. With this slider 36
we can set on which devices should there be a drop down menu. And on which devices to leave regular navigation 37
links, just like the desktop version. 38
For example, if you move the slider to the right, 39
this will disable it from the tablets. Meaning on tablets we'll see the regular links and on anything 40
smaller we'll see the hamburger menu. 41
Now let's style the Navbar to match our design. 42
First the background. 43
That's quite simple. 44
Just set it to blue from the background property. 45
One thing you'll notice is that content inside the Navbar stretches only until a certain point. 46
That's because the content is sitting inside the container. 47
And this is not the container we made. 48
It's a default container from Webflow, which is not as wide as ours. 49
We don't want that container. 50
Instead, we want to use the container that we already made. Like the one where our hero content is sitting 51
inside. 52
So, how can we use our container instead? Just like the way we reuse any other element, by applying the 53
same class. And you will see how the container instantly changes the width. 54
This is the class that we created, and we gave it to this container that we styled before. 55
And if we apply this to this Nav bar container, all those styles and properties will be carried to this 56
nav bar container. Just like what we did with buttons. 57
If we decide to change the width of our default container in one place, it will instantly update in every 58
other place. 59
Just like magic. 60
Next, we need to insert our logo. Just like we did with the hero image, 61
we're going to export the logo and drop it as an image element. 62
Unlike with our hero image, this time we're going to select SVG. 63
Why? 64
Because we created our logo ourselves in Figma. It's a regular text right now. 65
If we export it in SVG, we will maintain its vector-based qualities. It will be retina optimized right away. 66
It will stretch infinitely, without losing quality. And file size is going to be very small. In most cases, 67
SVGs will be smaller than PNGs and JPGs. 68
All right. 69
Once you have the image exported, add a new image element and upload the logo like we did last time. 70
I have Brand elements selected, so when I click the image, it will automatically drop inside that Brand 71
box. 72
But the logo is glued to the top. 73
How do we fix this? 74
There are many ways to make it algin in the center. 75
Probably the simplest is to add a top margin to the image itself. 76
Let's now style the navigation links. 77
We're going to do that just like anything else. 78
But first, what we're going to do, is delete all other Nav links and just keep one. We will apply some style 79
to it, 80
so Webflow automatically creates a class. 81
Now we can duplicate this Nav link as many times as we want. And when we make a change to one of them, 82
all of them will be updated instantly. 83
Long live CSS. 84
So we're going to apply the appropriate textiles. Pretty straightforward. 85
And apply spacing to match our designs. 86
We can measure spacing in Figma and apply the exact spaces in here too. The space on top in Figma is 87
42 pixels, and on the side it's 30. In Webflow we'll use padding for this. We could use margins, 88
but by default it already has padding and it's quite nice 89
this way. 90
On the sides, we'll use 15 pixels for each side. 91
This way padding of two neighbouring links will add up to a total of 30 pixels. By using padding the entire 92
link will grow, so users will be able to click not just with the text but with the entire box. 93
You'll see that link is clickable even on the empty space. Because it's not an empty space, 94
the entire thing is link itself. 95
Finally, let's add that button. Although instead of using a button element I'm just going to create the 96
button from one of these Nav links. 97
Duplicate the class, so we can make new changes without affecting other navigation links. 98
Now let's see what properties our button has in Figma. 99
The textile is the same as the navigation links. The background is wide, but with 20% opacity. And 100
the padding around the text is 12 pixel on top and bottom, and 24 on the sides. Let's recreate all that 101
in Webflow. Inside Webflows color picker, 102
you can apply 20% opacity from this box named A - for Alpha value. 103
Not sure why Alpha and why not 104
O for Opacity. It's something to do with RGBA color system. But, who cares? 105
We have different padding than our Nav links. 106
And we have rounded corners which we can set in border section. 107
There is no exact value here. Increase it until it stops rounding. 108
No problem if you go over it. 109
All right. 110
Inside Figma, we can see that it has 30 pixel margin on the top. 111
And for the left margin, we're going to use 15. Because it will add up with an existing 15 margin from 112
that Nav link 113
next to it. Because of new spacing, logo is out of line as you can see. We gonna have to align 114
the logo in the middle with the nav menu. We're gonna have to align it by eye. 115
Finally, let's check the fluidity and responsiveness of our navbar. As you can see they are being squeezed 116
to the edges. 117
That's because we don't have any extra spacing. The hero section is fine because it has padding applied 118
on the sides. 119
So when browser window shrinks and container shrinks with it, the padding will stop it from being squeezed 120
all the way to the edges. 121
We can apply the similar padding to our navbar as well. 122
And there. Now it's looking good. 123
It's almost done. 124
There is one small, but important thing missing. 125
Hover effects. None of the links or buttons react when I move mouse over them. 126
We're going to learn how to add the hover effects in the next lesson. 127
Right. 128
So to recap. We learned how to add a navigation bar. The anatomy of a navbar and what is it made of. The 129
settings of a navbar and how it works on smaller devices. 130
We learned how to add a logo inside a navbar, and how to style links inside the navigation menu.