All right. 1
In this video, we're going to start optimizing the mobile version of our home page. 2
Starting with the navigation bar. In the previous project, we made the navbar fully visible on the tablet. 3
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
settings panel. 5
Here you will find options for menu icon. When the slider dot is on the tablet, 6
it means the hamburger menu will show on the tablet and all smaller devices. 7
If we move it down, then tablet will be disabled. 8
That's excellent. 9
No need to change anything. 10
All fits very well. 11
Love it when things just work out easily like that. 12
Let's see what needs to be done for the navbar on mobile landscape. 13
It's just colors and some spacing. In the previous project, the dropdown was stretching edge to edge, but here 14
it's not. 15
That's because we have a little different arrangement for the navbar. 16
It's sitting inside the hero section, which has padding and the dropdown only stretches as far as the 17
navbar itself. 18
We could potentially make it stretch, if we wanted to. Perhaps by using negative margins, but personally 19
I'm quite fine with it, not stretching edge to edge. 20
So, let's leave it as it is. To change the color of the menu button, 21
we just need to change the text color of the block. Its font based icon, so the font color will change 22
it. 23
The same goes for the size. 24
We just need to increase the font size and it will grow. 25
I think we used 30 pixels previously. And let's adjust the padding for the whole clickable button. 26
It's a little too big. 27
Ideally, we'd make it same size for the buttons and links on the navbar. Which are 44 pixels in 28
height, 29
I believe. So if the text this like 30 pixel, then 7 pixel padding should make it 44. 30
Now, let's style the open state of the menu. In order to show the menu while we're styling, select any element 31
on the navbar. And then in the settings tab click Open menu. Now menu items are clickable and we can 32
select them and style them. The background color is coming from this nav menu block. So, let's select it 33
and change the background to... 34
I'd say that our dark blue color, that we used on the footer. 35
And same for the background on the menu button. 36
When you make changes to the open state of the menu button, make sure the selector field shows this green 37
Open class. 38
That's how we style the open state. 39
Sometimes the menu might be open, but this open state class isn't there. 40
So, any changes won't be reflected as you want it. Just refresh the canvas and open the menu again. 41
Let's give it some proper padding. 42
Can you notice why the button is stretching to the edges? 43
It's because the display is set to block. And block elements take up full available width. 44
We need to change it to display inline block. 45
Just like default buttons. 46
Now that's about right. 47
But we need to align it on the left. 48
We've had this similar challenge in the previous project. Inline blocks act sort of like text. 49
So, if the parent container has left, center or right alignment, it's going to obey that alignment. 50
In this case, parent is nav menu, but it says that it's left aligned. 51
In reality it's not. 52
This happens sometimes. 53
So just go back and forth and just apply left alignment manually. 54
So the change is reflected. And also let's add some left and top margins to align the button properly. 55
All right. 56
That's better. 57
Finally, I would make corners of the backgrounds rounded. 58
It will give a bit nicer look. 59
We don't need it on all 4 sides. For the menu button, we need it on top corners. 60
Click this option to edit an individual corners. 61
For the Nav Menu, 62
we want it all corners, besides the top right corner. That way button and menu will connect nicely. Like 63
a single object. 64
That's perfect. Now, 65
let's just see how it looks in the preview mode. 66
One last thing. 67
You see the logo here has a little bit of padding? This padding isn't there on tablet and desktop versions. 68
Webflow is inserting it on mobile versions. 69
We don't need that padding, because we have our own. 70
So, just get rid of it. 71
All right. 72
Moving on to the portrait version. 73
There's actually nothing that needs to be adjusted for the nav bar. The paddings need to be fixed, but 74
that's part of the hero section. 75
So we're gonna do that in the next video.