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
Haha my bad! It is: ⌥ + ⌘ + Enter. Idk why i said “option ‘H’ and enter” 😅 Hope this helps! Btw you can also just right click when after selecting some elements and click “add stack”. Hope this clarifies!
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?! 🤣
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?
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 :)
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.
Hi Nandi, very explanatory video btw. Thanks! And you used a shortcut to wrap the "Get Started" button into a frame. Could you please explain how you did that under my comment. I'll very much appreciate that. Looking forward to your reply, Thanks again!
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 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 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.
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
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'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! :)
Great value as always! It's incredible how effective you can teach things man 🤝
Thanks so much Michael! 🫶
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!
Real life saver. I was struggling with the mobile view. Thank you 🙏
Glad i could help :)
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 🫡💙
Thanks for the good intro-the energy, the music, Framer...
I love your videos, I always understand new contexts.
Super happy to hear this :)
Amazing 👏 I managed to follow along very well. Keep up the good content
I’m so glad 🫶 thanks for the feedback 🙏
Bro this came right in time 💜💜
Happy to hear it 🫶 i hope it helps
Hi, thanks for the really helpful videos. Can you clarify the 'very specific' shortcut you used at 7:00? The captions didnt help. Thanks
Haha my bad! It is: ⌥ + ⌘ + Enter.
Idk why i said “option ‘H’ and enter” 😅
Hope this helps!
Btw you can also just right click when after selecting some elements and click “add stack”.
Hope this clarifies!
You are the genius of Framer thank you
Ahh thanks so much 🫡
Nice and simple, great job!
Appreciate it :)
Sir you have such a kind soothing voice. Thanks, helpful tutorial
Glad to hear it 🫶
Thank you, but so so so many shortcuts, like how did you browse for the logo ? how did you frame the get started button ?
All of them are shown on the bottom of the video!
I think the logo search was CMD + K.
And the other one probably ⌥ + ⌘ + ↩.
Hope this helps :)
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."
I was literally looking for this kind of tutorial ystd!!
I’m glad! ;) hope it helps
thanks very much for your generosity! Great content!
Appreciate your support! :)
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.
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. 🙌
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?
Great video as always, nice haircut dude
Hey, thanks!
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, why is my Mobile Breakpoint doesn't have the Menu icon? that 2 lines icon
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?
Can you make a video on an overlay full screen navbar
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.
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.
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 :)
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 🔥
Very well explained! Thank you 🤩
Glad it was helpful!
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.
from where you got the logo icon?
Thank you so much!!
Glad it helped! :)
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.
Hi Nandi, very explanatory video btw. Thanks! And you used a shortcut to wrap the "Get Started" button into a frame. Could you please explain how you did that under my comment. I'll very much appreciate that. Looking forward to your reply, Thanks again!
for wrapping an element into a stack you can use the ⌥ + ⌘ + ↩ shortcut.
thanks for the support btw
Hello! How to make main stack
Why do the opened menu overlap my home page content
shouldn't it?
@@framer.university wait oops it was the other way round ok so "Why do the contents in my home page overlap my opened menu?"
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.
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 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.
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
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!
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!
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 :)
thank you for the tutorial
Thanks :)
anytime! :)
THANK YOU
My pleasure:)
Thanks a lot
you're welcome :)
Awesome!
Thanks!
The clap at the beginning 😅
😆😆
thank u
anytime!
I like your tutorial. But Framer works pretty strange
Thanks!
What’s strange about Framer?
Want a video on how to create an e-commerce website using Framer
Maybe this video can help you:
ruclips.net/video/Zukyq9k1Z3A/видео.html
You can also integrate Shopify with Framer. (framercommerce.com/)
Yoooo✌
yoo!
Your voice is annoying but the class is good! LOL thanks
Thanks 🫶
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?
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?
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 :)