Thank you Benjamin it was super easy. I still remember those days when I struggled with the Bootstrap framework for the responsive navigation menu to make it worthwhile.
Really hoping we get affects or motion FX presets or templates eventually, imagine being able to create super smooth animations for specific component items or even the entire component itself - would be fire
I have to say I understood w some menus are left justified when most people are rt handed so it just makes visitors have to reach more (mine are always centered, occasionally rt justified)
If I rebuild this, the mobile topbar is not visible? And the animation is always instant? The transition is never smooth.. Where should I fix this? In the 'Spring'?
Just a question. Why do we need all these 35+ steps to just make a mobile menu? Why does it not create a mobile menu based on the desktop version, end if somebody want, can modify everything afterwards? 😮
Great tutorial. Annoyingly I have a slight issue. The mobile variation of nav works fine in preview component section. But when applied to my mobile layout and previewed the drop down options aren't shown. I can only see the menu icon changing to close. @framer any idea what the issue could be?
i think you really should include everything in the video such how you made the grid and the mobile menu button. you always seem to have premade elements in your videos which makes things a little more confusing for beginner users.
Overflow: Scroll always seems to create a scrollbar while the animation happens and then when it's done the scrollbar disappears and everything jumps 5px to the right when it does, probably because the frame with the links appears before the whole Phone Open frame is stretched to full height.
Help! I'm using the menu as an Anchor Links to scroll different sections on the same screen, but the variant doesn't close or change to the default one... so looks like a bug when I click any link. Does anyone know how to fix it??
HEY you should teach us from the begining show how to make the first things and why there's a small frame at the bottom... I'm struggling trying to create the fucking nav bar
On the page you are redirecting to, you have to set the variant to the collapsed one. When you publish and test it on your phone, the menu will collapse after clicking a link. Connecting the links to the collapsed variant within the component doesn't work, because it doesnt switch the page.
Hi! I'd like to ask why the icon menu in my mobile website, when tapped, is highlighted with a sort of gray area when yours in the demo website don't... thank you
Try return to the framer dashboard and then open up your file again, my transitions seem to stop working on the app and i need to re-open the file to fix it
I designed this and the problem i encountered is the menu not closing after tapping a link and the screen on the background moving when tapping a link. How to fix this?
So I have tried this mobile navigation technique, however the phone open variant only limits its scrolling to 100vh on Chrome but on Safari, once past the phone height it scrolls to the home page. How do I fix this?
I have a small issues i am hoping someone can help with please. You can see at 3:19 that the icon is selected and he picks the close variant icon. I don't have this option anywhere. I have it selected, but all I have is "styles" and below that is just transform, accessibility and code overrides. Any ideas?
Do you mean how to add links if the items themselves are component instances? In that case, you can go into said instance, add a Variable to the Link, and then assign them in the navigation (parent) component as you normally would.
@@Framer Unrelated question. I've been using Elementor and starting to switch to Framer. I have one question. When using videos/images on Elementor, it's vital to use small optimized videos and images or use a CDN for page speed and load times. Does Framer already optimize uploaded images and videos?
My problem is that no matter what i do, when the navigation menu opens it pushes everything down, when i start using absolute blocks things just fall apart... a video on a full viewport fade in would be nice
Hey @Benjamin ! I've been losing sleep for days trying to solve a problem: in the menu open on mobile, how do I leave the menu top bar fixed at the top and have scroll only the bottom part (with the links)? I know you must be very busy, but I would appreciate a lot your kindly help. Thanks so much :)
Ah, to achieve that you can instead apply the overscroll properties/setup to a layer containing your links, given that layer sits below the topbar you wish to keep sticky at the top.
Love these short, very informative and to the point videos. So nice and easy to create this. Thanks
That new preview update is 🔑🗝️🔑
This really should mention that the nav component is set to fixed on the home page and that it also has a z-index of "10" applied to it.
thank you!
You the man, thanks!!
Thank you Benjamin it was super easy. I still remember those days when I struggled with the Bootstrap framework for the responsive navigation menu to make it worthwhile.
Really hoping we get affects or motion FX presets or templates eventually, imagine being able to create super smooth animations for specific component items or even the entire component itself - would be fire
Engaging dynamic mobile style has been priority 1 for years including unique sleek menus w easing effects 🎉📱💪🏻💥
I have to say I understood w some menus are left justified when most people are rt handed so it just makes visitors have to reach more (mine are always centered, occasionally rt justified)
Thank for framer always update new video 🎉
If I rebuild this, the mobile topbar is not visible? And the animation is always instant? The transition is never smooth.. Where should I fix this? In the 'Spring'?
Just a question. Why do we need all these 35+ steps to just make a mobile menu? Why does it not create a mobile menu based on the desktop version, end if somebody want, can modify everything afterwards? 😮
As an Elementor user, I watched this and wondered exactly the same thing. This is a very convoluted way of designing.
@@-The-Golden-God- Man like.. how hard would it be for them to just auto hamburger at the break point smh
Does it collapse when a link is clicked?
It doesn't for me tho
Thank you Framer, you're the best!
Thanks Benji 💘
Great tutorial. Annoyingly I have a slight issue. The mobile variation of nav works fine in preview component section. But when applied to my mobile layout and previewed the drop down options aren't shown. I can only see the menu icon changing to close. @framer any idea what the issue could be?
i think you really should include everything in the video such how you made the grid and the mobile menu button. you always seem to have premade elements in your videos which makes things a little more confusing for beginner users.
Thank you!
Overflow: Scroll always seems to create a scrollbar while the animation happens and then when it's done the scrollbar disappears and everything jumps 5px to the right when it does, probably because the frame with the links appears before the whole Phone Open frame is stretched to full height.
Why did you not show every step from the beginning with the hamburger menue... i dont know how to create this lines and the X... thanks
Help! I'm using the menu as an Anchor Links to scroll different sections on the same screen, but the variant doesn't close or change to the default one... so looks like a bug when I click any link.
Does anyone know how to fix it??
Exactly what I wondered. Did you find a solution to this?
HEY you should teach us from the begining show how to make the first things and why there's a small frame at the bottom... I'm struggling trying to create the fucking nav bar
These new overscroll and overflow features don't seem to work.. I've tried in different ways, but they don't work
why doesn't it work when the header is sticky? in this case, the menu just pushes the content down.
What is that wallpaper?
That's great! Thanks for this. Now how do I make the menu to collapse when clicking on a link?
Amazing tutorial! 🔥🚀
Is it possible to collpapse mobile menu after tapping on a link on single page sites? (i.e. instead of tapping the "x")
This is my problem too there is a solution?
Press L on the links and connect it to the collapsed menu. Select on tap
On the page you are redirecting to, you have to set the variant to the collapsed one. When you publish and test it on your phone, the menu will collapse after clicking a link.
Connecting the links to the collapsed variant within the component doesn't work, because it doesnt switch the page.
@@tomsodoge9988 Scroll Variant button is disabled for the open menu.
Hi! I'd like to ask why the icon menu in my mobile website, when tapped, is highlighted with a sort of gray area when yours in the demo website don't... thank you
Nice!
Great video! can someone show me how to slide the menu from left or right on tap?
I can't seem to make the animation between the Mobile and Mobile open state. It's just like an instant transition. Anyone can help?
Try return to the framer dashboard and then open up your file again, my transitions seem to stop working on the app and i need to re-open the file to fix it
@@nathanmoran1894 I found the issue! The overflow option was on “hidden”. After changing it “visible” it’s working fine.
Thanks for the help btw!
Hey, did it work? Mine doesn't seem to work either.
@@riochebrioche Hey look along the components that may be blocking it. It’s often because the overlay is set to hidden
amazing!
I designed this and the problem i encountered is the menu not closing after tapping a link and the screen on the background moving when tapping a link. How to fix this?
So I have tried this mobile navigation technique, however the phone open variant only limits its scrolling to 100vh on Chrome but on Safari, once past the phone height it scrolls to the home page. How do I fix this?
4:58 Webflow is missing this natively.
I have a small issues i am hoping someone can help with please. You can see at 3:19 that the icon is selected and he picks the close variant icon. I don't have this option anywhere. I have it selected, but all I have is "styles" and below that is just transform, accessibility and code overrides. Any ideas?
And a larger issue is when I test this, the menu pops open up off the screen... not within the screen?
how to link the menu voices if those are components?
Do you mean how to add links if the items themselves are component instances? In that case, you can go into said instance, add a Variable to the Link, and then assign them in the navigation (parent) component as you normally would.
@@Framer Unrelated question. I've been using Elementor and starting to switch to Framer. I have one question. When using videos/images on Elementor, it's vital to use small optimized videos and images or use a CDN for page speed and load times. Does Framer already optimize uploaded images and videos?
Yes - framer optimizes images and provides controls to let it select the best image quality for the instance or allows the designer to do the same.
you should connect it to google sheets or airable.
not uploading - connecting
My problem is that no matter what i do, when the navigation menu opens it pushes everything down, when i start using absolute blocks things just fall apart... a video on a full viewport fade in would be nice
Make sure the navigation instance (on your breakpoints) is either position absolute or position fixed to avoid it pushing down your contents.
Hey @Benjamin ! I've been losing sleep for days trying to solve a problem: in the menu open on mobile, how do I leave the menu top bar fixed at the top and have scroll only the bottom part (with the links)? I know you must be very busy, but I would appreciate a lot your kindly help. Thanks so much :)
Ah, to achieve that you can instead apply the overscroll properties/setup to a layer containing your links, given that layer sits below the topbar you wish to keep sticky at the top.
Thanks @@Framer so much! I made it 🥳
I followed every thing step by step and.... it dosn't work ahaha who knows what mistake I made
Did you manage to fix this? I menu flies off the fcking screen when I tap open...
I can’t find the new navigation
Can someone help me??
You can remix it here, click on 'Remix'
navs-mobile.framer.wiki/
Benjamin, thank you. But I have the logo in the middle so this video is useless..
kinda ridiculous theres no auto hamburger that auto converts the menu at the phone breakpoint, is that not the whole point of framer?
Not as intuitive as doing a tap overlay on the menu component. and the ui does not remain as clean no matter how much try.
yoooo