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
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!
Yes there's a reason for it. In the component, we might have different heights across different variants. One might have 60px, and another "fit content". If on the breakpoint level we have fixed 60px, that will mean that no matter on what variant we are, it will keep that 60px size. We set fit content on the breakpoint level, so it will always follow the current variant's height. Hope this helps! lmk if you have anymore Qs :)
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?
Make sure to also set the direction to vertical. Also, wrapping frame’s layout settings could also be the issue. Make sure to go through each frame one by one, and compare the setting to my remix. 🙌
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?
Glad to hear this! :) How to solve your issue: First step is to select the trigger element, which is not the menu, but the close button within. Then hit “L” and connect to the variant you wanna transition to. I hope this helps! :)
You need to make sure it’s above all content on the page. You can go to styles, and add a z-index property. Elements with higher z-index will appear on top of lower z-index elements. My navs are usually 9 or 10 z-index. Lmk if this helps!
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.
Thanks for the kind words. Yes I believe Framer is the best for designing landing pages and sales funnels. But why don't you give it a try and see it yourself. You'll love it :)
I followed along for 1 hour but I had multiple issues along the way. right at the start your presets are different. I did not have a stack at the beginning. also mobile version was hard to follow since mine wasn't really fitting
Thanks for this feedback! It’s super valuable! Regarding the first issue, I started setting up “starter” pages in the remixes in my latest tutorials so everyone can start with the same settings and elements. Regarding the second issue, can you explain what do you mean by “yours wasn’t really fitting”?
@@framer.university thank you for the reply Nandi. when I look at my mobile version it shows only the about button on top. I don't think you can fix it without looking at it. I'll just give it another try soon
I'm stuck on 12:46, when I adjust the height to be 60 pixels all my content is pushed out of the frame and is no longer visible. What am I doing wrong?! 🤣
Some things have actually changed. I tried using the Menu from the component to connect the open and close navigation for mobile but it didn't work from the navigation component page. Instead, each interaction was added directly to the main menu component. Is this an error from my end, or is it just how it is now. My solution was to wrap the menu into a new stack from the Navigation page and it worked fine. I dab
Now i am facing another issue. When I click on the menu button, it basically pushes the hero section below while the hero section still being visible. as well as the whole screen scrollable. My need is to make it work like how current menu work. Like a overlay screen. How to resolve this?
I can´t make the x style of variant i use the same shortcut but nothing happens. Finally im going to try by doing with + an rotate de icon maybe it more easier.
I don't. But if you create a new variant for your nav where it loses opacity or completely disappears, then you can trigger a variant switch with scroll variant effect applied to the nav component. I hope this helps.
It’s up to you! You can create hover effect by either clicking the hover option or designing a separate variant and connecting with mouse enter and mouse leave interactions. Pressed state can only be created by clicking the little “pressed” option.
I'm assume when you're calling these people Liberal you're referring to Leftist. IDK if most people would associate some dude setting himself on fire with conservatives unless they're slow, disingenuous, or just started paying attention to the world recently.
Thank you so much. I am just learning how to make websites and your videos are making it very accessible to me.
So happy to hear this mate 🫡💙
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
Thanks for the video idea! :)
Much appreciated. Feel lucky to have found this channel.
I’m so glad u feel that way 🫶
Real life saver. I was struggling with the mobile view. Thank you 🙏
Glad i could help :)
Very elegantly presented. Learned critical skills easily and effortlessly. Thank you!
Glad it was helpful!
Great value as always! It's incredible how effective you can teach things man 🤝
Thanks so much Michael! 🫶
Bro this came right in time 💜💜
Happy to hear it 🫶 i hope it helps
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.
I love your videos, I always understand new contexts.
Super happy to hear this :)
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!
Yes there's a reason for it.
In the component, we might have different heights across different variants. One might have 60px, and another "fit content".
If on the breakpoint level we have fixed 60px, that will mean that no matter on what variant we are, it will keep that 60px size.
We set fit content on the breakpoint level, so it will always follow the current variant's height.
Hope this helps! lmk if you have anymore Qs :)
Nice and simple, great job!
Appreciate it :)
You are the genius of Framer thank you
Ahh thanks so much 🫡
Sir you have such a kind soothing voice. Thanks, helpful tutorial
Glad to hear it 🫶
Thank you so much!!
Glad it helped! :)
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?
Make sure to also set the direction to vertical.
Also, wrapping frame’s layout settings could also be the issue.
Make sure to go through each frame one by one, and compare the setting to my remix. 🙌
thanks very much for your generosity! Great content!
Appreciate your support! :)
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?
Glad to hear this! :)
How to solve your issue:
First step is to select the trigger element, which is not the menu, but the close button within. Then hit “L” and connect to the variant you wanna transition to.
I hope this helps! :)
I did exactly as the tutorial and when i clic the toggle button it pushes logo + logo up out of view
Make sure that the distribution property is set correctly within navigation stacks. And also that the component on canvas has fit height.
great tutorial. Best one I've found thusfar
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?
I was literally looking for this kind of tutorial ystd!!
I’m glad! ;) hope it helps
Can you make a video on an overlay full screen navbar
Very well explained! Thank you 🤩
Glad it was helpful!
Thanks for the tutorial man. Quick question, how do I make the phone-open variant cover the entire viewport?
You set min-height 100vh for it within the component.
@@framer.university it worked. Thanks man 🔥
thank you for the tutorial
I made the menu but when ever I open it in phone preview, it hides behind the content of the page. How do I fix this?
You need to make sure it’s above all content on the page.
You can go to styles, and add a z-index property. Elements with higher z-index will appear on top of lower z-index elements.
My navs are usually 9 or 10 z-index.
Lmk if this helps!
@@framer.university Thank you :)
The clap at the beginning 😅
😆😆
Hey Nandi thanks for the video. Please I realize my frame keeps jumping to the top even when the position is relative.
What do you mean by jumping to the top?
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.
Thanks for the kind words.
Yes I believe Framer is the best for designing landing pages and sales funnels. But why don't you give it a try and see it yourself. You'll love it :)
Great video as always, nice haircut dude
Hey, thanks!
When i set header menu to fixed, when i open mobile menu it pushes other content below.
hmm, something must be off. the the navigation is fixed indeed, it shouldn't push other content.
THANK YOU
My pleasure:)
I followed along for 1 hour but I had multiple issues along the way. right at the start your presets are different. I did not have a stack at the beginning. also mobile version was hard to follow since mine wasn't really fitting
Thanks for this feedback! It’s super valuable!
Regarding the first issue, I started setting up “starter” pages in the remixes in my latest tutorials so everyone can start with the same settings and elements.
Regarding the second issue, can you explain what do you mean by “yours wasn’t really fitting”?
@@framer.university thank you for the reply Nandi. when I look at my mobile version it shows only the about button on top. I don't think you can fix it without looking at it. I'll just give it another try soon
I'm stuck on 12:46, when I adjust the height to be 60 pixels all my content is pushed out of the frame and is no longer visible. What am I doing wrong?!
🤣
Stack distribution needs to be "start."
Some things have actually changed. I tried using the Menu from the component to connect the open and close navigation for mobile but it didn't work from the navigation component page. Instead, each interaction was added directly to the main menu component. Is this an error from my end, or is it just how it is now.
My solution was to wrap the menu into a new stack from the Navigation page and it worked fine.
I dab
I'm facing the same issue, but I can't solve it. Could you please tell me in detail how to fix it? Thank you.🥲
This was a Framer bug which was fixed last week. Should be good now!
Now i am facing another issue. When I click on the menu button, it basically pushes the hero section below while the hero section still being visible. as well as the whole screen scrollable. My need is to make it work like how current menu work. Like a overlay screen. How to resolve this?
I think it's because you're using sticky positioning for it. Switch it to fixed positioning instead.
I can´t make the x style of variant i use the same shortcut but nothing happens. Finally im going to try by doing with + an rotate de icon maybe it more easier.
Awesome!
Thanks!
Do you have a video on how to make the nav either disappear or turn translucent on scroll?
I don't. But if you create a new variant for your nav where it loses opacity or completely disappears, then you can trigger a variant switch with scroll variant effect applied to the nav component. I hope this helps.
@@framer.university yes this does help, appreciate the response!
when should we use the hover and pressed variants that appear downwards?
It’s up to you!
You can create hover effect by either clicking the hover option or designing a separate variant and connecting with mouse enter and mouse leave interactions.
Pressed state can only be created by clicking the little “pressed” option.
is there a way where we can change the animation of the open/close icon pivot point?
what do you mean by pivot point?
the menu will animate based on the change between its open and close variant.
Want a video on how to create an e-commerce website using Framer
Maybe this video can help you:
th-cam.com/video/Zukyq9k1Z3A/w-d-xo.html
You can also integrate Shopify with Framer. (framercommerce.com/)
I like your tutorial. But Framer works pretty strange
Thanks!
What’s strange about Framer?
He goes way too fast. Horrible
Thanks for the feedback! Which part was hard to understand?
I'm assume when you're calling these people Liberal you're referring to Leftist. IDK if most people would associate some dude setting himself on fire with conservatives unless they're slow, disingenuous, or just started paying attention to the world recently.
I made the menu but when ever I open it in phone preview, it hides behind the content of the page. How do I fix this?