So far we're rocking our responsive versions. In this video, 1
we're going to style the navbar menu button. Or as cool kids call it, the hamburger menu. 2
You know, because an icon sort of looks like a hamburger. 3
Right now, 4
it looks quite horrific. 5
Not to worry, styling this isn't a big deal. 6
First, lets style the button itself. The menu icon 7
that's inside, can be changed. 8
We're not stuck with it. 9
If we want to get our own icon and add that instead, we can. We can just delete the icon and add an image 10
element inside the menu button. Which is a simple div and upload your own icon in SVG or PNG format. 11
Although there is one benefit of just keeping this default icon, because the color is editable from the 12
font settings. 13
And this makes it easier to change colors. 14
We could also build our own menu icon from div block. 15
Sometimes I do this if I'm building a super snazzy animation for my client. 16
Almost anything is possible in Webflow. 17
For now, let's stick with the default icon. 18
First, the color. We'll need this in white. 19
We can change the font color to white and that's going to do the job. When styling this element, stick 20
to styling the menu button element instead of the icon. 21
Next, let's increase the size. 22
It's way too tiny. 23
We can do this again from the font settings and 30 pixels should be good. And let's shrink the padding 24
a little. Padding is what controls how much of this is clickable and visible on the dropdown. 25
And lastly let's align it with the logo. 26
We want it to be centered. Not floating in the air like it is now. 27
Can we center it? 28
We could go on and change the Navbar display to flexbox and do all that. But a simpler option is 29
to just add a top margin on the bottom and then pull it down. 30
We gotta size this by eye. 31
You can see it better in portrait view. 32
And 27 or something like that seems like a good choice. 33
We don't need to add a hover animation here. Because it displays only on mobiles, where we don't use a 34
mouse so hover is pointless. 35
Now let style the inside of the menu. Styling blindly isn't nice, so we can open the menu and style it 36
while open. We can do that from settings. Just select any navbar element and go to settings, and then click 37
Open Menu. 38
This will keep the menu open until we style it. 39
There are two other menu type options, but I'm not a big fan of those. 40
I like this default dropdown version, it's easier to work with and needs less styling. 41
Now let's understand the structure of the whole menu. 42
This Nav Menu block is exactly the same block that holds all our links in the desktop view. On desktop 43
it doesn't have any background and it's arranged horizontally. 44
But if we make any changes to it on desktop, those changes will be carried down on the mobile view too. 45
Same goes for any layout changes. 46
So if one day you see mobile links arranged oddly, check if you have made any changes to the desktop 47
version. And inside this Nav Menu block, we have all the links including the button. So to style the whole 48
menu, 49
first we're going to style another menu and then we will style the links inside. 50
Let's give this a different background color. 51
Our black color from the design looks pretty good. 52
Let's add the same padding on the sides like our hero section. 53
That way we will be consistent with our grid. 54
Right now, the links are nudged inside a little because they have their own padding, which we are going 55
to remove once we style the links. 56
Let's also add top and bottom patting, but make it 30 pixels instead of 60. 57
Right now we have styles that are being inherited from the desktop, like the underline on the hover and 58
paddings. 59
Let's fix the padding first. 60
We don't need side paddings. And let's choose an equal top and bottom to maintain the nice separation 61
between the links. 62
20 pixels look good. 63
We don't need a hover effect because it's for mobile devices. 64
How do we remove that? From the hover state, which we can find here under States. 65
Don't worry if the menu disappears. 66
Not sure why this happens exactly, but we don't actually need the menu to be open. 67
We can just make the style changes, as long as we have the Nav Link selected. 68
Click X under the border style, to disable the bottom border. 69
When you test this, you'll see that border still appears. 70
That's because we have this border enabled not just on hover, but also on a regular state. 71
So we need to remove it from a regular state as well. To avoid this funny behavior. 72
Just double check that you have it disabled on both states. 73
No need to open the menu, just go inside the navigator and select the Nav Link. 74
And there. Now we got no hover. 75
Okay. Now the button. 76
First, let's get rid of the left margin. 77
Next, 78
let's change Display to Inline Block. Right now it's set to block. 79
That's why it's stretching like that. For some reason, the button aligns in the middle. 80
That means some sort of property on the parent element is doing this. 81
There are 2 properties that could align into the center. 82
First, the flexbox layout. But our Nav Menu isn't flexbox, so that's not it. 83
And second, is a regular text alignment. And that would make sense because inline block elements 84
can be aligned using text alignment. 85
But if we check the text alignment of the Nav Menu, it's set to left. 86
And this is deceptive, because in reality it's not set to left. 87
If you change the properties into something else and then put it back to the left alignment, 88
this time it will do what it says. 89
This looks like an issue from Webflow. 90
I might be wrong, but it looks like there is a default center alignment on the Nav Menu block, 91
and Webflow does, for some reason it doesn't reflect this in the styles. 92
Whenever you come across with something like this, just follow your logic and if what you see doesn't 93
make sense, then play with the styles. And sometimes you'll notice that they're just pretending. 94
All right, let's decrease the margin of this button to match the rest. 95
The spacing we use between links is 20 pixels top plus 20 bottom, total of 40. 96
So let's total this to 40 here. 20 from the last link and 20 for the top margin. 97
And same for the bottom margin. The real space on the top is 30 pixels from the menu padding and 20 pixels 98
from the Nav Link padding. To match this 50 pixel total, let's add bottom 20 on the button. 99
And there. That's looking good. We can keep the hover effect here. We don't need it, but neither it's doing 100
any harm. And sometimes on buttons, it's quite nice when you press it and it sort of changes the state. 101
Finally, let's add the same background color on the hamburger. 102
Now for this, it's important that we add that background color on the open state. Because if we add a 103
background on a generic state, then we'll get the background when menu is even closed. Changing styles 104
for the open state, is sort of like changing styles for the hover state. It has to show this green label. 105
But the open state is not listed in the states dropdown. Instead, open state needs to be enabled from 106
the settings, by opening our menu. 107
Now you can see, the Open label appears. This means edits that we make now, will be reflected only on 108
the open state. Keep it in mind, just opening the menu isn't enough, make sure this green label is there. 109
Sometimes it malfunctions and you might have the navigation menu open, but this open state label doesn't 110
show up. Which means, whatever you're going to edit, it's not going to edit on the open state. So you 111
might need to refresh the designer. 112
Now we can change the background color. And also, let's round the top corners, so it looks more polished. 113
But instead of rounding all 4 corners, we're just going to round the top 2 and have the bottom 2 114
flat. 115
This way they will kind of connect with a menu. To do so, we're going to need to select the individual corners 116
option inside the borders. And then select the top 2 and then put them something like 6 pixel. 117
Let's test our results in the preview. 118
And there. It's all looking great. 119
It's also looking great on the portrait view. We don't need to change anything, except for one small detail. 120
On portrait, we have different page padding. On landscape we have 60, but on portrait we use 30. We don't 121
even need to open the menu for this. Just select the Nav Menu from the navigator and change padding 122
from 60 to 30. And done. 123
So, we have successfully styled the hamburger menu for mobile devices. We changed the color and size 124
of the icon, using simply the font styles. We've played with paddings and margins of the Menu Button to 125
align it nicely in the navbar. Then from the settings, we opened the menu and styled the menu item. Gave 126
it a background we wanted and adjusted padding. We've made small changes to the nav links and 127
a nav button as well. Removed the hover from the links and tweaked the paddings. And we've learned how to change 128
the style of the menu only when it's open. Hero section is all done here for all the device views. In 129
the next videos we'll continue with the rest of the page.