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 KZbin!
🌞 Try Framer for free: framer.com
🎉 Follow on Twitter: / framer
💎 Join Community: www.framer.com...
#website #webdesign #framer

[@jameskulundu8945]

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.

[@John316Ministries]

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

[@torimazza2315]

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

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

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

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

[@OliveiraBr]

you discovered how to fix this?

[@BugsVsHumans]

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

[@dxtmanish]

thank you. was literally looking for this!

[@earlpenson5764]

Me toooo!!!! Hahaha

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

[@bakewithheena996]

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

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

[@chidorirasenganz]

I’m considering using an overlay as components can’t use vh yet

[@hectorwearden202]

Also want to know this. It doesn't seem possible atm. I'm sure there's a hack. Would kill to know how to do this. It's such a basic thing too

[@owenthompson2142]

I don't know if you have figured this out yet, but I saw something about setting the height to 100vh - this seems to fill the entire screen no matter what size your display is

[@doriskordic5108]

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!

[@ArthurBurgan]

Hey! You'd have to add a transition back to the Phone variant but having done that, the Drawer now animates back to its initial state and links don't work on iPhone. I wonder how you solved your issue if you did

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

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

[@TheEvandroCabral]

I have the same problem

[@robsonoliveira7552]

Excellent video, very explanatory!

[@yukimiyashita7639]

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

[@ronald-xs6es]

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?

[@Atseo]

Hii! when i paste my navigation into a ( new page insert new page > contact > paste into breakpoint desktop ) it doesn't paste above i have to fix it, fine when i create tablet and phone it's not responsive like my home, why? thanks.

[@carolinadelsur6411]

Hi! I have a logo on one side and a menu icon on the other side in both the desktop and mobile versions. I've designed the dropdown menu in a frame and won't be doing it like in the video, where the same links are used. How can I achieve this? Does it work the same as in Figma, where I prototype the dropdown menu frame?

[@WhoFarted69]

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.

[@annaseulgi]

It just worked for me - did you make sure to add the interactions from both phone component frames?

[@WhoFarted69]

@@annaseulgi I’m not sure what i did the second time around that was different from the first, but I eventually got it working. I must’ve missed something that first time. Thanks for the response! I love communities around stuff like this! 😊👍

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

[@khalilbenaoumeur4234]

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,

[@ArthurBurgan]

Just getting into framer as a dev and I'm loving it so far! However, I have an issue with the links in the Drawer. In the Drawer, Links work perfectly on desktop and Android, however, they don't work on iOS. Tapping the link closes the drawer but doesn't navigate. Longtap will open link preview and it's possible to navigate that way. I should mention that I tried attaching tap event to both Drawer and individual Links. When no interaction is attached, Links work, but the Drawer doesn't close. Would really appreciate it if someone could point me in the right direction 🙏

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

[@breadchick2022]

Useful and informative tutorial, thank you! p.s. I can't copy a component for a mobile (it pasted not properly on a page). I did smth wrong? pls help 😭

[@offthepathworks9171]

My version doesn't of header on mobile doesn't "cover" content below, not sure how to fix it.

[@dhk180]

Me too,,, If you figured out how to fix it,, Please Please let me know,,, help me,,,,,😂

[@mpc9476]

I just had the same problem, did you find out how to fix it?

[@twinnieee]

Add a Z index style, it's in the last minute of the video

[@raulaguilar]

I'm doing a single page where I put some links on the top bar that smooth scroll down to a section on same page, is there a way to close the topbar when click on those links?

[@Framer]

Not yet!

[@bagchi_sagnik]

@@Framer please fix this!

[@teatlenecks4087]

I am having trouble with this tutorial. I made the breakpoints and the navbar like the tutorial shows, however the navbar is still not responsive in the traditional sense, the navbar only changes when it reaches the phone breakpoint. I assume this is because the width of the navbar is "fixed" but none of the other options make the navbar responsive, why is this happening?

[@Framer]

Have you made the navigation bar pinned to the left and right sides on the Primary Desktop breakpoint? That should fix it. I recommend joining our Discord for questions like this, it would be easier to help with a little more info: discord.com/servers/framer-341919693348536320

[@timothyhunt]

I am having problems with the mobile menu, when I expand the menu it doesn't push my content down, the menu itself goes up off the page, any tips?

[@brian_akhtar]

this doesn't seem to work if you try and add this component on a page that already has variants. I had to delete my tablet and phone variants and then remake them with the added breakpoints for the navbar to appear properly. Otherwise it was showing the Desktop navbar on all Variant sizes for the page

[@user-qm2yx6sg5n]

why whenever i tap on the menu on phone the whole menu goes all the way up? -.-

[@henrykmatthew3900]

I love your work. Thank you but the background at the back disturbs my view.

[@SebastianPilz]

How to set Links on a Icon? I can only Link Text and Pictures

[@Framer]

Wrap your icons in a frame

[@JoepSwagemakers]

Why is the first frame functioning as a mask for the menu? That makes not sense to me

[@touchGrasss]

wallpaper please?

[@mpc9476]

I don't know why my mobile menu doesn't show when I open it after putting the navigation bar inside a frame, I followed every step :(

[@Framer]

Right click the frame you placed it in and set overflow to visible

[@raphaelartieda819]

This didn't work for me. It doesn't resize to the phone top bar

[@cmndz]

He skipted the hover part. I'm struggling trying to do that T_T

[@galloburrito4252]

Drop down menu…?

[@AnthonyDeck-bk9or]

🎉I'm trying the framing app to get my bitcoin money to to transfer money at the trade money for Bitcoins😂❤

[@patrikleng770]

Every single thing about framer is upside down compared to other tools. So unintuitive!

[@irissaladino6788]

:( May 2023 and this tutorial is already old and outdated