How to Create a Responsive Navigation Component in Framer | Framer Desktop, Tablet, Mobile Tutorial

In this video, I walk through how to design a basic responsive navigation for desktop, tablet, and mobile devices in Framer. Framer is a tool similar to Figma where you can create designs and view live prototypes on the web. You can learn more about here: www.framer.com/
Music for this video is by Cordio. You can learn more about their music here:
www.cortes.us/music
0:00 - Intro
0:22 - Designing the Navigation Bar
3:44 - Creating the Navigation Component
4:14 - Making the Tablet Variant
4:50 - Making the Open Mobile Variant
6:40 - Making the Mobile Variant
7:14 - Prototyping
8:12 - Mobile Breakpoint
8:40 - Viewing the Live Site
9:23 - Wrapping Up
⁙ social media:
Twitter : / soren_iverson
Dribbble: dribbble.com/soreniverson
Gumroad: soreniverson.gumroad.com/
Website : soreniverson.com/
#framer #websitedesign #navigation

[@paulbelityo5719]

This was awesome man. I love it when I'm able to find specific tutorials like this on the one section I'm having issues with and you covered and explained everything perfectly. Very much appreciated! 🙏🏻

[@kelly_browning]

Phenomenal tutorial! Thank you for this, Soren.

[@crazybuoy8357]

THANKSS HELPED A LOT!!! NEW TO FRAMER, and the tutorial on the official framer channel did not help and rather confused me more

[@Changiz]

Very nice and straight to the point. Thank you.

[@ardianshala_]

Thanks for sharing these tips, super hyped to start learning Framer!

[@sebastianbarberena8025]

Thanks man, easy to follow. Great work flow.

[@viking.karwur]

Thanks Soren! Very helpful to learn!

[@charlesajiboye4421]

easy and straightforward. Good one

[@AyaanFarasanims]

Thank you so much! This was really helpful

[@timkrash9190]

Framer sure is pretty hard, even though it seems to be easy. Trying out Webflow and Framer at the same time and Webflow seems to be so much easier.

[@yzniinja]

super slick thanks!!

[@MrMyers1489]

LIFESAVER!!!!!!!!!! THANK YOU!!!

[@pipoyyotaza4163]

omgg tysm for sharing this! cos ive struggle how to make this nav

[@mrjamesbrand5185]

Thanks for this 🙏

[@web3Terry]

Framer to the moon !! between Figma and framer would like to see how designs transition to each app

[@sakshammahajan2421]

thanks fam. ♥

[@arunk2710]

You can press Shift + A to set width and height to Fit Content.

[@petermckinnon386]

great tutorial pal, better than Framers responsive nav.

[@denzel3246]

Hey Soren, I have an issue with the second part of the component at 6:40 where when I toggle “No” visibility, the whole box doesn’t seem to collapse to be smaller but only my icon and title travels down to the middle of the variant.

[@Hangvogel]

Hi Soren, excellent video. Helped me a lot. I have managed everything, however when checking the result I see in the "Phone" section the following: When clicking on the menu icon, the navigation bar shoots away to the top (out of sight). I see only a few menu items. Any idea how I can fix this?

[@lukeingalls2199]

i'm used to your twitter. Was not expecting tutorials too

[@DP-gm7vd]

Great tutorial, easy to follow along and concise commentary. I have one question, how would you make the open variant of the mobile nav fill the whole screen?

[@phroobin]

I have the exact same question!

[@RaffiRexer-dp4qt]

Thanks Soren beautiful video! How about on the left side have a logo and a slogan on the right side just next to the logo instead of just the text 'My Framer Site' Should I first stack the logo and the slogan text?

[@AdamSkjervold]

Yo this is so fucking helpful bro this has been such as struggle for me ever since starting framer lmao

[@farisamin_cello]

How can I copy the same navigation bar to different pages?

[@interactiondesignmentor21]

Hello, sir. I hope you're doing well. Thank you for the helpful content. We need the fundamentals to finish the instruction on the Framer, which we started with the basics. i love your course content

[@soren_iverson]

To clarify, you’re saying you’d like a video explaining the basics of Framer?

[@interactiondesignmentor21]

@@soren_iverson Yeap sure

[@user-uo3vx9po9s]

Hey Soren, I am creating a navbar that contains a locale selector but for some reason I can't get it to stack vertically for mobile. Is there a way to fix this?

[@C00L8osGuy]

Thanks. Subscribed. This was very well done. Easiest to follow framer tutorial. Building my first site on Framer. Is there a simple way to make a typeform “pop up” with a button press?

[@soren_iverson]

Let me dig into this, if I can figure out how I'll make a video

[@C00L8osGuy]

@@soren_iverson Thanks. I love the typform/Calendly plug-in, but it would look so much nicer & more valuable if they could pop up in a window overlay. I have a feeling it’s doable with the tools provided, but I figured I’d ask someone more experienced. 🙌🏾

[@Michael.design]

Hey Soren, great tutorial! I noticed the the transition from closed to open is pretty fast. Ive seen some templates where it transitions a bit more slowly, like an effect. How would I achieve that? Ive tried to adjust the spring on the default navbar component of Framer itself but it doesn't seem to work..

[@mauricesteiner8168]

under: transition; can be found somewhere - no?

[@user-wd7ju4ve8k]

at 6.oo mins exactly, when adding the stack it completely breaks the other desktop and tablet variations? Make them completely blank? Please help I have no idea why this happens :'/

[@azran1180]

how do I make the navigation bar to be sticky and the mobile open variant to work as an overlay. I have seen some framer templates that have done it. Can you tell how to do that?

[@soren_iverson]

Under the “Position” section on the right side of the framer UI there’s a drop-down called “Type”. Setting that to Fixed or Sticky should work.

[@user-bx4tm3ds5z]

Nice video who doesn't work today. Lost a major part of my night trying to make it workable. Ty a lot for useless !

[@josepdevillaret]

You don't even know how to do it... It works

[@josepdevillaret]

Also have some respect for people. Bye