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 learned another lesson and have a question. When clicking the menu on a mobile device, if a sidebar appears, should this sidebar component be included in the navigation component, or should it be implemented as an overlay?
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 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 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
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 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?! 🤣
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 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.
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!
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! :)
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 🫡💙
Real life saver. I was struggling with the mobile view. Thank you 🙏
Glad i could help :)
Thanks for the good intro-the energy, the music, Framer...
Much appreciated. Feel lucky to have found this channel.
I’m so glad u feel that way 🫶
Very elegantly presented. Learned critical skills easily and effortlessly. Thank you!
Glad it was helpful!
You are the genius of Framer thank you
Ahh thanks so much 🫡
Bro this came right in time 💜💜
Happy to hear it 🫶 i hope it helps
I love your videos, I always understand new contexts.
Super happy to hear this :)
Sir you have such a kind soothing voice. Thanks, helpful tutorial
Glad to hear it 🫶
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.
Great value as always! It's incredible how effective you can teach things man 🤝
Thanks so much Michael! 🫶
Nice and simple, great job!
Appreciate it :)
thanks very much for your generosity! Great content!
Appreciate your support! :)
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 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. 🙌
I was literally looking for this kind of tutorial ystd!!
I’m glad! ;) hope it helps
great tutorial. Best one I've found thusfar
I learned another lesson and have a question. When clicking the menu on a mobile device, if a sidebar appears, should this sidebar component be included in the navigation component, or should it be implemented as an overlay?
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?
Very well explained! Thank you 🤩
Glad it was helpful!
Can you make a video on an overlay full screen navbar
Great video as always, nice haircut dude
Hey, thanks!
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
THANK YOU
My pleasure:)
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?
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 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.
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.
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?
Thanks a lot
you're welcome :)
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.
Thanks :)
anytime! :)
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
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!
Hello! How to make main stack
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."
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.
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.
Awesome!
Thanks!
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:
ua-cam.com/video/Zukyq9k1Z3A/v-deo.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?
Someone this is not so beginner friendly!
sometimes things can feel a bit tricky at first :) is there anything you would prefer to be explained in more detail?
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.
He goes way too fast. Horrible
Thanks for the feedback! Which part was hard to understand?
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 :)