0
1
00:00:00,690 --> 00:00:04,080
So far we're rocking our responsive versions. In this video,
1

2
00:00:04,080 --> 00:00:09,090
we're going to style the navbar menu button. Or as cool kids call it, the hamburger menu.
2

3
00:00:09,220 --> 00:00:11,270
You know, because an icon sort of looks like a hamburger.
3

4
00:00:16,170 --> 00:00:16,620
Right now,
4

5
00:00:16,620 --> 00:00:17,670
it looks quite horrific.
5

6
00:00:17,670 --> 00:00:20,150
Not to worry, styling this isn't a big deal.
6

7
00:00:23,390 --> 00:00:26,620
First, lets style the button itself. The menu icon
7

8
00:00:26,630 --> 00:00:28,560
that's inside, can be changed.
8

9
00:00:28,580 --> 00:00:29,560
We're not stuck with it.
9

10
00:00:29,590 --> 00:00:36,170
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

11
00:00:36,290 --> 00:00:43,050
element inside the menu button. Which is a simple div and upload your own icon in SVG or PNG format.
11

12
00:00:43,190 --> 00:00:47,360
Although there is one benefit of just keeping this default icon, because the color is editable from the
12

13
00:00:47,360 --> 00:00:48,400
font settings.
13

14
00:00:48,560 --> 00:00:50,750
And this makes it easier to change colors.
14

15
00:00:50,780 --> 00:00:53,480
We could also build our own menu icon from div block.
15

16
00:00:53,480 --> 00:00:57,790
Sometimes I do this if I'm building a super snazzy animation for my client.
16

17
00:00:58,160 --> 00:01:00,140
Almost anything is possible in Webflow.
17

18
00:01:00,140 --> 00:01:02,180
For now, let's stick with the default icon.
18

19
00:01:02,360 --> 00:01:04,310
First, the color. We'll need this in white.
19

20
00:01:04,310 --> 00:01:09,620
We can change the font color to white and that's going to do the job. When styling this element, stick
20

21
00:01:09,620 --> 00:01:12,920
to styling the menu button element instead of the icon.
21

22
00:01:12,920 --> 00:01:14,540
Next, let's increase the size.
22

23
00:01:14,540 --> 00:01:16,130
It's way too tiny.
23

24
00:01:16,130 --> 00:01:23,460
We can do this again from the font settings and 30 pixels should be good. And let's shrink the padding
24

25
00:01:23,460 --> 00:01:31,970
a little. Padding is what controls how much of this is clickable and visible on the dropdown.
25

26
00:01:31,990 --> 00:01:34,360
And lastly let's align it with the logo.
26

27
00:01:34,360 --> 00:01:38,530
We want it to be centered. Not floating in the air like it is now.
27

28
00:01:38,650 --> 00:01:39,990
Can we center it?
28

29
00:01:40,030 --> 00:01:45,100
We could go on and change the Navbar display to flexbox and do all that. But a simpler option is
29

30
00:01:45,100 --> 00:01:49,900
to just add a top margin on the bottom and then pull it down.
30

31
00:01:49,920 --> 00:01:51,480
We gotta size this by eye.
31

32
00:01:51,490 --> 00:01:53,750
You can see it better in portrait view.
32

33
00:01:53,950 --> 00:01:58,210
And 27 or something like that seems like a good choice.
33

34
00:01:58,240 --> 00:02:02,890
We don't need to add a hover animation here. Because it displays only on mobiles, where we don't use a
34

35
00:02:02,890 --> 00:02:04,680
mouse so hover is pointless.
35

36
00:02:07,650 --> 00:02:13,170
Now let style the inside of the menu. Styling blindly isn't nice, so we can open the menu and style it
36

37
00:02:13,170 --> 00:02:19,140
while open. We can do that from settings. Just select any navbar element and go to settings, and then click
37

38
00:02:19,200 --> 00:02:20,100
Open Menu.
38

39
00:02:20,100 --> 00:02:22,860
This will keep the menu open until we style it.
39

40
00:02:22,890 --> 00:02:26,360
There are two other menu type options, but I'm not a big fan of those.
40

41
00:02:26,370 --> 00:02:30,870
I like this default dropdown version, it's easier to work with and needs less styling.
41

42
00:02:30,870 --> 00:02:33,260
Now let's understand the structure of the whole menu.
42

43
00:02:33,320 --> 00:02:39,270
This Nav Menu block is exactly the same block that holds all our links in the desktop view. On desktop
43

44
00:02:39,270 --> 00:02:42,170
it doesn't have any background and it's arranged horizontally.
44

45
00:02:42,360 --> 00:02:47,970
But if we make any changes to it on desktop, those changes will be carried down on the mobile view too.
45

46
00:02:47,970 --> 00:02:49,890
Same goes for any layout changes.
46

47
00:02:49,910 --> 00:02:54,630
So if one day you see mobile links arranged oddly, check if you have made any changes to the desktop
47

48
00:02:54,630 --> 00:03:00,540
version. And inside this Nav Menu block, we have all the links including the button. So to style the whole
48

49
00:03:00,540 --> 00:03:00,980
menu,
49

50
00:03:00,990 --> 00:03:05,740
first we're going to style another menu and then we will style the links inside.
50

51
00:03:05,760 --> 00:03:07,820
Let's give this a different background color.
51

52
00:03:19,130 --> 00:03:21,340
Our black color from the design looks pretty good.
52

53
00:03:21,830 --> 00:03:25,370
Let's add the same padding on the sides like our hero section.
53

54
00:03:25,370 --> 00:03:28,250
That way we will be consistent with our grid.
54

55
00:03:28,410 --> 00:03:33,110
Right now, the links are nudged inside a little because they have their own padding, which we are going
55

56
00:03:33,110 --> 00:03:34,890
to remove once we style the links.
56

57
00:03:34,910 --> 00:03:45,660
Let's also add top and bottom patting, but make it 30 pixels instead of 60.
57

58
00:03:45,690 --> 00:03:50,680
Right now we have styles that are being inherited from the desktop, like the underline on the hover and
58

59
00:03:50,690 --> 00:03:51,350
paddings.
59

60
00:03:51,390 --> 00:03:53,070
Let's fix the padding first.
60

61
00:03:53,070 --> 00:03:58,890
We don't need side paddings. And let's choose an equal top and bottom to maintain the nice separation
61

62
00:03:58,890 --> 00:03:59,700
between the links.
62

63
00:04:05,680 --> 00:04:07,480
20 pixels look good.
63

64
00:04:07,570 --> 00:04:10,320
We don't need a hover effect because it's for mobile devices.
64

65
00:04:10,330 --> 00:04:14,980
How do we remove that? From the hover state, which we can find here under States.
65

66
00:04:14,980 --> 00:04:16,510
Don't worry if the menu disappears.
66

67
00:04:16,510 --> 00:04:20,870
Not sure why this happens exactly, but we don't actually need the menu to be open.
67

68
00:04:20,920 --> 00:04:24,850
We can just make the style changes, as long as we have the Nav Link selected.
68

69
00:04:28,190 --> 00:04:32,120
Click X under the border style, to disable the bottom border.
69

70
00:04:36,940 --> 00:04:39,430
When you test this, you'll see that border still appears.
70

71
00:04:39,430 --> 00:04:44,530
That's because we have this border enabled not just on hover, but also on a regular state.
71

72
00:04:44,530 --> 00:04:49,410
So we need to remove it from a regular state as well. To avoid this funny behavior.
72

73
00:04:49,600 --> 00:04:52,110
Just double check that you have it disabled on both states.
73

74
00:04:52,120 --> 00:04:55,690
No need to open the menu, just go inside the navigator and select the Nav Link.
74

75
00:05:03,760 --> 00:05:06,280
And there. Now we got no hover.
75

76
00:05:06,310 --> 00:05:07,410
Okay. Now the button.
76

77
00:05:07,410 --> 00:05:09,250
First, let's get rid of the left margin.
77

78
00:05:14,600 --> 00:05:14,960
Next,
78

79
00:05:14,960 --> 00:05:18,290
let's change Display to Inline Block. Right now it's set to block.
79

80
00:05:18,290 --> 00:05:24,290
That's why it's stretching like that. For some reason, the button aligns in the middle.
80

81
00:05:24,290 --> 00:05:27,880
That means some sort of property on the parent element is doing this.
81

82
00:05:27,890 --> 00:05:30,380
There are 2 properties that could align into the center.
82

83
00:05:30,380 --> 00:05:35,850
First, the flexbox layout. But our Nav Menu isn't flexbox, so that's not it.
83

84
00:05:35,850 --> 00:05:40,880
And second, is a regular text alignment. And that would make sense because inline block elements
84

85
00:05:40,880 --> 00:05:42,830
can be aligned using text alignment.
85

86
00:05:42,950 --> 00:05:46,790
But if we check the text alignment of the Nav Menu, it's set to left.
86

87
00:05:47,090 --> 00:05:50,780
And this is deceptive, because in reality it's not set to left.
87

88
00:05:50,870 --> 00:05:56,540
If you change the properties into something else and then put it back to the left alignment,
88

89
00:05:56,990 --> 00:05:59,170
this time it will do what it says.
89

90
00:05:59,330 --> 00:06:01,420
This looks like an issue from Webflow.
90

91
00:06:01,430 --> 00:06:06,170
I might be wrong, but it looks like there is a default center alignment on the Nav Menu block,
91

92
00:06:06,590 --> 00:06:10,580
and Webflow does, for some reason it doesn't reflect this in the styles.
92

93
00:06:10,580 --> 00:06:14,780
Whenever you come across with something like this, just follow your logic and if what you see doesn't
93

94
00:06:14,780 --> 00:06:20,620
make sense, then play with the styles. And sometimes you'll notice that they're just pretending.
94

95
00:06:20,630 --> 00:06:24,140
All right, let's decrease the margin of this button to match the rest.
95

96
00:06:24,140 --> 00:06:30,110
The spacing we use between links is 20 pixels top plus 20 bottom, total of 40.
96

97
00:06:30,110 --> 00:06:35,930
So let's total this to 40 here. 20 from the last link and 20 for the top margin.
97

98
00:06:39,430 --> 00:06:45,160
And same for the bottom margin. The real space on the top is 30 pixels from the menu padding and 20 pixels
98

99
00:06:45,160 --> 00:06:51,880
from the Nav Link padding. To match this 50 pixel total, let's add bottom 20 on the button.
99

100
00:06:55,830 --> 00:07:00,100
And there. That's looking good. We can keep the hover effect here. We don't need it, but neither it's doing
100

101
00:07:00,100 --> 00:07:05,350
any harm. And sometimes on buttons, it's quite nice when you press it and it sort of changes the state.
101

102
00:07:05,710 --> 00:07:09,160
Finally, let's add the same background color on the hamburger.
102

103
00:07:09,160 --> 00:07:14,440
Now for this, it's important that we add that background color on the open state. Because if we add a
103

104
00:07:14,440 --> 00:07:20,380
background on a generic state, then we'll get the background when menu is even closed. Changing styles
104

105
00:07:20,380 --> 00:07:26,110
for the open state, is sort of like changing styles for the hover state. It has to show this green label.
105

106
00:07:26,150 --> 00:07:32,230
But the open state is not listed in the states dropdown. Instead, open state needs to be enabled from
106

107
00:07:32,230 --> 00:07:34,360
the settings, by opening our menu.
107

108
00:07:40,840 --> 00:07:47,470
Now you can see, the Open label appears. This means edits that we make now, will be reflected only on
108

109
00:07:47,470 --> 00:07:53,910
the open state. Keep it in mind, just opening the menu isn't enough, make sure this green label is there.
109

110
00:07:53,980 --> 00:07:59,620
Sometimes it malfunctions and you might have the navigation menu open, but this open state label doesn't
110

111
00:07:59,620 --> 00:08:04,360
show up. Which means, whatever you're going to edit, it's not going to edit on the open state. So you
111

112
00:08:04,360 --> 00:08:06,640
might need to refresh the designer.
112

113
00:08:06,640 --> 00:08:11,650
Now we can change the background color. And also, let's round the top corners, so it looks more polished.
113

114
00:08:12,010 --> 00:08:19,080
But instead of rounding all 4 corners, we're just going to round the top 2 and have the bottom 2
114

115
00:08:19,080 --> 00:08:19,680
flat.
115

116
00:08:19,690 --> 00:08:26,680
This way they will kind of connect with a menu. To do so, we're going to need to select the individual corners
116

117
00:08:26,680 --> 00:08:35,460
option inside the borders. And then select the top 2 and then put them something like 6 pixel.
117

118
00:08:39,880 --> 00:08:41,710
Let's test our results in the preview.
118

119
00:08:44,620 --> 00:08:46,360
And there. It's all looking great.
119

120
00:08:51,560 --> 00:08:56,320
It's also looking great on the portrait view. We don't need to change anything, except for one small detail.
120

121
00:08:56,740 --> 00:09:02,650
On portrait, we have different page padding. On landscape we have 60, but on portrait we use 30. We don't
121

122
00:09:02,650 --> 00:09:07,630
even need to open the menu for this. Just select the Nav Menu from the navigator and change padding
122

123
00:09:07,630 --> 00:09:09,390
from 60 to 30. And done.
123

124
00:09:17,080 --> 00:09:22,690
So, we have successfully styled the hamburger menu for mobile devices. We changed the color and size
124

125
00:09:22,690 --> 00:09:28,420
of the icon, using simply the font styles. We've played with paddings and margins of the Menu Button to
125

126
00:09:28,420 --> 00:09:34,330
align it nicely in the navbar. Then from the settings, we opened the menu and styled the menu item. Gave
126

127
00:09:34,330 --> 00:09:39,500
it a background we wanted and adjusted padding. We've made small changes to the nav links and 
127

128
00:09:39,530 --> 00:09:44,710
a nav button as well. Removed the hover from the links and tweaked the paddings. And we've learned how to change
128

129
00:09:44,710 --> 00:09:50,920
the style of the menu only when it's open. Hero section is all done here for all the device views. In
129

130
00:09:50,920 --> 00:09:53,650
the next videos we'll continue with the rest of the page.