🥳 Enjoy 3 months of Framer for free!
What are we building
Lately I've been getting some request on how to create a navigation element which also works perfectly on mobile. In today's drop, ill show you exactly how to achieve a perfect working menu on all devices.
#1 - Create your navbar
Create the navbar. I just created a simple rectangle with 100% width and 80px height. Turn it into a component and voila, you have a nav bar. Unfortunately it doesn't have any content ;)
#2 - Create your phone variant
I've filled it up with content and created a spacer to distribute the logo and links from left to right. Create a second variant and rename it to phone. I set the width of the element to 340px to make sure that even on the smallest devices it works nicely.
#3 - Fixing the distribution
Allright, the problem starts to appear. Everything is on top of each other. Luckily it's a easy fix with flexbox. Just change the distribution to vertical and make sure the height is set to Fit.
#4- A third variant
Let's create another variant from the Phone variant and call that "phone closed". Play around with the visibility of the layers to make sure the closed variant only shows the logo
#5- Creating space for the toggle
Now we just need a way to toggle between the open and closed state. Select logo on the primary variant and press cmd+option+enter. Add a rectangle and set the width of the whole stack to 1fr. Then set distribute to "Space-between" and turn rectangle into a component.
#6- Create the toggle
I've created a menu toggle and a menu close variant. Connect the variants with L to each other. Then go back to your navigation component and hide the menu toggle on the Desktop version and set the variants to the correct state on the phone opened and closed variant.
#7- Connecting the variants
Just played around with the padding a little bit on the Phone variants. After that all that's left is connecting the toggles. Select the toggle on the phone variant and connect it to the other variant. Make sure to connect both the opened and closed variant.
#8- Last step
Ouch, it grows out of screen. Well that's because height is still set to 80px. Make sure to change the height to Fit and you'll see everything works.
Want to let the menu open on top of all your content. Just set position: fixed - this will make sure your content won't jump.
👋 I hope you've enjoyed today's drop.