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 
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
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 thank you for all of your help!