0
1
00:00:03,240 --> 00:00:03,520
All right.
1

2
00:00:03,520 --> 00:00:07,430
In this video, we're going to start optimizing the mobile version of our home page.
2

3
00:00:07,430 --> 00:00:12,760
Starting with the navigation bar. In the previous project, we made the navbar fully visible on the tablet.
3

4
00:00:12,770 --> 00:00:18,290
Let's see if we can do the same here. To show the nav links on the tablets, select navbar and go to the
4

5
00:00:18,290 --> 00:00:19,430
settings panel.
5

6
00:00:19,430 --> 00:00:23,780
Here you will find options for menu icon. When the slider dot is on the tablet,
6

7
00:00:23,780 --> 00:00:28,990
it means the hamburger menu will show on the tablet and all smaller devices.
7

8
00:00:29,060 --> 00:00:32,320
If we move it down, then tablet will be disabled.
8

9
00:00:32,360 --> 00:00:33,350
That's excellent.
9

10
00:00:33,350 --> 00:00:34,760
No need to change anything.
10

11
00:00:34,820 --> 00:00:36,070
All fits very well.
11

12
00:00:36,080 --> 00:00:38,390
Love it when things just work out easily like that.
12

13
00:00:44,230 --> 00:00:49,060
Let's see what needs to be done for the navbar on mobile landscape.
13

14
00:00:49,260 --> 00:00:55,410
It's just colors and some spacing. In the previous project, the dropdown was stretching edge to edge, but here
14

15
00:00:55,410 --> 00:00:55,950
it's not.
15

16
00:00:55,950 --> 00:00:59,130
That's because we have a little different arrangement for the navbar.
16

17
00:00:59,130 --> 00:01:04,650
It's sitting inside the hero section, which has padding and the dropdown only stretches as far as the
17

18
00:01:04,650 --> 00:01:05,880
navbar itself.
18

19
00:01:05,900 --> 00:01:10,920
We could potentially make it stretch, if we wanted to. Perhaps by using negative margins, but personally
19

20
00:01:10,920 --> 00:01:13,250
I'm quite fine with it, not stretching edge to edge.
20

21
00:01:13,260 --> 00:01:16,440
So, let's leave it as it is. To change the color of the menu button,
21

22
00:01:16,440 --> 00:01:21,570
we just need to change the text color of the block. Its font based icon, so the font color will change
22

23
00:01:21,570 --> 00:01:23,480
it.
23

24
00:01:23,510 --> 00:01:24,770
The same goes for the size.
24

25
00:01:24,770 --> 00:01:27,320
We just need to increase the font size and it will grow.
25

26
00:01:27,320 --> 00:01:33,370
I think we used 30 pixels previously. And let's adjust the padding for the whole clickable button.
26

27
00:01:33,410 --> 00:01:34,430
It's a little too big.
27

28
00:01:34,640 --> 00:01:40,400
Ideally, we'd make it same size for the buttons and links on the navbar. Which are 44 pixels in
28

29
00:01:40,400 --> 00:01:40,810
height,
29

30
00:01:40,820 --> 00:01:45,830
I believe. So if the text this like 30 pixel, then 7 pixel padding should make it 44.
30

31
00:01:50,720 --> 00:01:56,450
Now, let's style the open state of the menu. In order to show the menu while we're styling, select any element
31

32
00:01:56,480 --> 00:02:03,240
on the navbar. And then in the settings tab click Open menu. Now menu items are clickable and we can
32

33
00:02:03,240 --> 00:02:09,090
select them and style them. The background color is coming from this nav menu block. So, let's select it
33

34
00:02:09,120 --> 00:02:10,960
and change the background to...
34

35
00:02:11,080 --> 00:02:14,190
I'd say that our dark blue color, that we used on the footer.
35

36
00:02:33,080 --> 00:02:35,090
And same for the background on the menu button.
36

37
00:02:38,660 --> 00:02:43,730
When you make changes to the open state of the menu button, make sure the selector field shows this green
37

38
00:02:43,790 --> 00:02:44,990
Open class.
38

39
00:02:44,990 --> 00:02:46,580
That's how we style the open state.
39

40
00:02:46,580 --> 00:02:50,280
Sometimes the menu might be open, but this open state class isn't there.
40

41
00:02:50,300 --> 00:02:56,300
So, any changes won't be reflected as you want it. Just refresh the canvas and open the menu again.
41

42
00:02:59,480 --> 00:03:10,270
Let's give it some proper padding.
42

43
00:03:10,380 --> 00:03:13,080
Can you notice why the button is stretching to the edges?
43

44
00:03:13,080 --> 00:03:18,000
It's because the display is set to block. And block elements take up full available width.
44

45
00:03:18,010 --> 00:03:20,260
We need to change it to display inline block.
45

46
00:03:20,280 --> 00:03:21,870
Just like default buttons.
46

47
00:03:21,870 --> 00:03:22,980
Now that's about right.
47

48
00:03:23,160 --> 00:03:25,010
But we need to align it on the left.
48

49
00:03:25,020 --> 00:03:29,390
We've had this similar challenge in the previous project. Inline blocks act sort of like text.
49

50
00:03:29,390 --> 00:03:34,870
So, if the parent container has left, center or right alignment, it's going to obey that alignment.
50

51
00:03:34,890 --> 00:03:38,520
In this case, parent is nav menu, but it says that it's left aligned.
51

52
00:03:38,520 --> 00:03:39,930
In reality it's not.
52

53
00:03:39,960 --> 00:03:40,920
This happens sometimes.
53

54
00:03:40,920 --> 00:03:44,500
So just go back and forth and just apply left alignment manually.
54

55
00:03:44,500 --> 00:04:14,290
So the change is reflected. And also let's add some left and top margins to align the button properly.
55

56
00:04:14,340 --> 00:04:14,600
All right.
56

57
00:04:14,610 --> 00:04:15,360
That's better.
57

58
00:04:15,360 --> 00:04:18,140
Finally, I would make corners of the backgrounds rounded.
58

59
00:04:18,180 --> 00:04:19,840
It will give a bit nicer look.
59

60
00:04:19,980 --> 00:04:24,240
We don't need it on all 4 sides. For the menu button, we need it on top corners.
60

61
00:04:24,240 --> 00:04:26,880
Click this option to edit an individual corners.
61

62
00:04:30,060 --> 00:04:30,960
For the Nav Menu,
62

63
00:04:30,960 --> 00:04:36,900
we want it all corners, besides the top right corner. That way button and menu will connect nicely. Like
63

64
00:04:36,900 --> 00:04:43,930
a single object.
64

65
00:04:44,790 --> 00:04:45,580
That's perfect. Now,
65

66
00:04:45,630 --> 00:04:48,850
let's just see how it looks in the preview mode.
66

67
00:04:58,550 --> 00:04:59,300
One last thing.
67

68
00:04:59,300 --> 00:05:06,010
You see the logo here has a little bit of padding? This padding isn't there on tablet and desktop versions.
68

69
00:05:06,410 --> 00:05:08,740
Webflow is inserting it on mobile versions.
69

70
00:05:08,740 --> 00:05:10,990
We don't need that padding, because we have our own.
70

71
00:05:11,020 --> 00:05:13,390
So, just get rid of it.
71

72
00:05:13,420 --> 00:05:13,750
All right.
72

73
00:05:13,750 --> 00:05:15,340
Moving on to the portrait version.
73

74
00:05:18,780 --> 00:05:23,130
There's actually nothing that needs to be adjusted for the nav bar. The paddings need to be fixed, but
74

75
00:05:23,130 --> 00:05:24,720
that's part of the hero section.
75

76
00:05:24,750 --> 00:05:26,340
So we're gonna do that in the next video.