Full-screen Mobile Menu

Hi, community!

I’m wondering how to create a similar full-screen mobile menu like this one.

Read-only link here.

Thank you in advance for your help :slight_smile:

For something that custom, I would approach it by using Interaction triggers compared to the default mobile menu.

something like this from the “Made In Webflow” community would be a good starting point to start to understand how something like that is built.

The author has included a video tutorial as well

Credit: @jonasarleth

Hi @Kyle_Davies1

Thanks for replying. What I’m trying to do is much simpler… Squarespace does it automatically.
I just want the menu items to be evenly distributed and centred at viewport height on the screen. And possibly changing the hamburger menu icon to a close icon. All of these are very default.

I found this Webflow tutorial 5 years ago and it seems it was much easier to do it before, I don’t see these settings options anymore:

Is there an easier and n00bie-friendly way of doing it? (I’m not a dev and this is my first Webflow website)

Thanks again!

Looks like you have gotten a good start, by adding a trigger to the button you can hide the “Icon 4” and show another image in its place with the same height/width.

1 Like

Yes @Kyle_Davies1, I had to redo the entire mobile nav for some reason. I like your idea for the ‘close’ icon. I know how to create the trigger and change the hamburger icon’s opacity to 0% but I have no clue how to show another icon. How would you do it?

Change the opacity to 100% same process, start it at 0.

Hmm, I must be doing something wrong. I set the close icon to be hidden as an initial state and the menu icon to fade to 0% opacity once it is triggered. However, the close icon doesn’t show when the menu is open. I also added 100% opacity to the menu icon on 2nd click but it doesn’t work. Am I adding these triggers in the right order/to the right elements?

1 Like

I managed to fix it using this thread :slight_smile: thank you for all of your help!