Make A Responsive Topbar From Scratch

A Framer Tutorial in which we’ll show you how to create a fully responsive topbar navigation component from scratch in Framer—within 10 minutes. I’ll also show you how to use it in different contexts, like what to do when your page is auto-sizing (like blog pages). For more Framer tutorials, subscribe to us on YouTube!

#website #webdesign #framer

[torimazza]

Benjamin - you are the BEST!! Thank you so much for such a helpful video - genuinely.

[JohnMinistries]

This is so exciting!!! Guys bringing it on we're so excited for more updated features

[BoburMavlonov]

I started learning Framer as a designer and I love this tool very much. I'm muddling through and managing to do what I want.

[jameskulundu]

I started using framer today, as a developer, I can see how simple it is to make responsive pages with framer compared to coding it.

[fvandrade]

This is amazing especially for someone who has been writing codes for years, the app really surprised me for the time dedicated... and finally, it's a shame that we don't have this app on all devices, I couldn't use it on the tab as a second screen.

[dxtmanish]

thank you. was literally looking for this!

[BugsVsHumans]

At the end you said, you hope it was helpful? More like, Framer is amazing! Thank you for all your hard work.

[FerdiCildiz]

Thanks! I have a question: when I add an interaction to "X" icon, it closes the menu without animation. What's wrong with it? Can you help me out?

[bakewithheena]

Whenever I am trying to add another variable say phone and adjust the width to 390pxl, my navigation is out of the page and not compressing itself to fit in like yours. I have literally followed you to T so I am so confused over this

[josepdevillaret]

Hey awesome Framers, i got a little question. Everything in the video went extremely good and smooth, but i appear to have a problem regarding the Phone Open Variant. In the video whenever you click the side menu both the framer (logo) and the side menu they don't move. In my case they seem to expand and get displaced, not a big problem but i wonder if you guys know what did I do wrong? Tysm in advance. Cheers

[sjoerdsiemes]

Instead of a custom hamburger icon i used an SVG of a hamburger illustration. But I can't make it so if you press it it will go to the open variant. I can only let you click on the entire topbar to open up the open state. PS. i use the hamburger menu for all 3 sizes. So also on desktop and tablet.

[ronald-xses]

Thanks for the information Benjamin! This was very useful. Quick Question: Is there a way to configure the menu button in mobile & tablet to contain an overlay that deactivates the page behind the dropdown? Then removes the overlay when "X" or overlay is tapped?

[doriskordic]

Great video! I have one question though. I have created a onepager website and all the links in the menu lead to #tagged sections on the front page. The problem with this is that when you click on a title in the menu in the mobile view, the menu doesn't close when it scrolls down to the section. Do you maybe have a fix for this? Thanks!

[sorJsam]

Hey question: How would you create the mobile menu when it's expanded so that is takes up the full viewport of the mobile no matter the size of the device?

[tintinwario]

Someone kindly advice. From 6:06, I can only see one link from the burger to the X. The reverse doesn't appear.

This has affected the mobile menu, it refuses to stay at X when clicked. What am I doing wrong?

[NathanielChangPhoto]

When I build this, or use the header example in Framer the menu items don't appear using the easing/spring like in this tutorial, they appear before the menu has expanded. How do I get the same effect?

[See_thru_it_all]

I'm not able to get my menu to animate like yours. I assume something changed in the past year. Does anyone know what I'm doing wrong? Thanks for this video, it was super helpful and I'm becoming more and more of a Framer fanatic all the time.

[yuki.miyashita]

Hi I'm having a hard time doing this when I already finish the portfolio can you do another one?

[emilieldr]

If you make a component out of a navigation tab to apply multiple states, the section to add a link gets disabled. Does that mean that we can't use components on navigation tabs, and why? I would like to create a component to apply resting, hover, and pressed states to a tab. I would like to use variants for all other tabs that may differ in text, but not in style. What is the work around?

[khalilbenaoumeur]

Hi, I have a question regarding designing the nav bar,
so I want to have mynav bar set as Transparent, with a bit of shadow, but when Scroling down I want that bar to show up as a plane color. somehow, the logo and the text will change from white to a darker color. I tired making it but I'm s till a new to framer,