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

[@awakelabs_]

This is truly excellent. So much clearer than any other nav bar video. Nice work !

[@scenestealer007]

Best Framer Nav tutorial out there!!!

[@morganwittmer6376]

This is the easiest to understand, most straightforward tutorial for Framer I've found. SO relieved to see you have more!!

[@crazybuoy8357]

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

[@tutorial-f9u]

Thank you for uploading this video. I appreciate your effort in creating this tutorial. It was very helpful.

[@yadavsuyog6723]

I watched 10 Nav bar videos, this was straightforward and easy. Thank you, tons.

[@charushilakadam1782]

I cant tell how much you helped me, thanks a million Soren!

[@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! 🙏🏻

[@sebastianbarberena8025]

Thanks man, easy to follow. Great work flow.

[@kelly_browning]

Phenomenal tutorial! Thank you for this, Soren.

[@viking.karwur]

Thanks Soren! Very helpful to learn!

[@OlufolakeVlog]

Best video so far for this topic

[@ardianshala_]

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

[@keepingupwithliberianteete6971]

very informative and helpful.... thanks Soren!

[@charlesajiboye4421]

easy and straightforward. Good one

[@Changiz]

Very nice and straight to the point. Thank you.

[@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.

[@pipoyhates4163]

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

[@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.

[@GolfRaffi]

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?

[@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!

[@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?

[@ChiSportsCollective]

When I do the mobile closed version and change the visibility from yes to no it doesnt shrink, any fix?

[@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.

[@sivuyilemabuto1794]

How do you make the nav sticky - animate it in and out as the user scrolls.

[@petermckinnon386]

great tutorial pal, better than Framers responsive nav.

[@yzniinja]

super slick thanks!!

[@arunk2710]

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

[@AaronNguyen-g3e]

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?

[@MrMyers1489]

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

[@mrjamesbrandltd]

Thanks for this 🙏

[@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?

[@OTSDesign]

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 :'/

[@lukeingalls2199]

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

[@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

[@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. 🙌🏾

[@reemukumari373]

When I stack X icon and name in mobile version then it reflects to desktop and tablet version also, After stack logo name come in center. Don't understand.

[@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?

[@sakshammahajan2421]

thanks fam. ♥

[@mikeyitua7175]

My nav bar doesn’t shrink

[@koffeebear406]

thank you thank you

[@KykyRara-o5f]

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

[@Blopez_]

@@josepdevillaret for some reason I cant find click button so I instead used the download button but now I cant align it for mobile open

[@PennyTe]

@@josepdevillaret ya ive watched at 10 least 10 vids now. disliked each & understand the nav bar in n out now. n noyhing works. ridiculous bruh

[@josepdevillaret]

@@PennyTe try having overflow hidden on all layers, also make the frames responsive, so they adjust depending on the width

[@ChiSportsCollective]

How come when i change the mobile layout it messes up and changes the layout of the desktop and tablet variants?