Framer for Beginners: Creating a Responsive Website Navigation

In this Framer tutorial, you'll learn how to build a fully responsive navigation bar. You'll discover how to use components and variants in Framer, along with interactions, to make elements responsive on your site.

0:00 - Introduction
0:57 - Creating the base of the navbar
4:47 - Creating a menu icon component
6:35 - Grouping the elements
9:51 - Turning the nav into a component
13:40 - Adding interactions to the nav
15:15 - Final product
15:46 - Additional resources

Follow me on:

[DavidPopelka]

Thank you so much. I am just learning how to make websites and your videos are making it very accessible to me.

[Auggie-iu]

Much appreciated. Feel lucky to have found this channel.

[AsadSynt]

Great video, Nandy could you make a video on using the free template which framer is providing and then customzing it to create a tottally different looking website? it will help alot of people to know how to use templates, since templates are so famous im sure it will be greate video

[Amado_Aguilar]

Real life saver. I was struggling with the mobile view. Thank you 🙏

[parejaj]

Very elegantly presented. Learned critical skills easily and effortlessly. Thank you!

[michaelbruzzese]

Great value as always! It's incredible how effective you can teach things man 🤝

[terapeutstesti]

I love your videos, I always understand new contexts.

[AbeerDesai]

You are the genius of Framer thank you

[shroots]

100% valuable! You truly have a knack for teaching Framer. Quick question: in the last step you increased the height of the component from 60 px to fit to content, but you didn't do this at the component level but on the desktop page level. Was there a reason for this? Thanks again!

[stacy_isa]

Sir you have such a kind soothing voice. Thanks, helpful tutorial

[faizanexcelorithm]

I have a request when you're applying any shortcut keys then please highlight those keys for the desktop also, this will be a lot easier to learn.

[luizdacosta]

thanks very much for your generosity! Great content!

[cheryl]

I was literally looking for this kind of tutorial ystd!!

[HardiRiddhi]

Hi, I wanted to go one step further & wanted to add hover effects to the link buttons. If you can tell how can I achieve it?

[sarahw.]

great tutorial. Best one I've found thusfar

[farzanehtabibi]

Thank you for the great tutorial, I set the distribution to start, but my navbar opens from the middle, instead of being a drop-down, how can I fix it?

[topvibesvideos]

I really enjoyed your video and found it incredibly inspiring as I’m just starting out.

I followed your steps closely, but I’m having trouble with the interaction between the menu and the close button. Despite pressing 'L' on the keyboard and dragging the arrow from the menu to the close button, setting it to 'click, ' it still doesn’t seem to work.

Any tips on how to resolve this issue?

[Kefmoles]

Hey Nandi thanks for the video. Please I realize my frame keeps jumping to the top even when the position is relative.

[mofunnel]

Is framer the best thing for designing landing pages and sales funnels? What do you think about it compared to WordPress? I want to help you clarify that. Thank you for the unique and wonderful content. We always learn a lot from you.

[BilalLoumghari]

Can you make a video on an overlay full screen navbar