Thank you for this in-depth dissection of this extremely difficult-to-grasp component in Webflow. You quickly make waste of what we DO NOT need. Exactly what I am looking for. Understanding what NOT to mess with in Webflow is the key to moving from amateur to advanced. Looking forward to more nav tutorials. Subscribed!
I'm giving webflow I try to build my clients' websites because many say it is much easier than coding like I regularly would. But I have to say, it already seems more overwhelming. Keep up the good content bro!
I once tried to make my own navbar by de-constructing the Webflow component and... I'm still having nightmares. Float. Of COURSE, it was set to fricken float. I never even noticed that. Gah. (And thank you, great video :) )
I just started webflow a week ago im 15 I have a very basic foundation of knowledge when it comes to building on webflow, and i just wanted to know what you would reccomend for me ( building navbar from scratch or with component ), i saw this video and another one of how to build from scratch, is it possible to build the same navbar from scratch as you can build from the component, and i just wanted to know what you would reccomend for a 15 year old trying to build a website. And one more thing, i want to build a normal casual website nothing really crazy ( for a clothing brand ) can i make something casual on webflow because i know is mainly more for fancy websites.
You're addressing a great pain point but to be honest, at this point, there are so many little hacks that are easy to forget that I'd still just rather go with a custom navbar made out of pure divs and webflow animations + JS
May somebody know how to make a Navbar , that has different appearance on the other site . Because i have transparent navbar for home site, and white lettering , of course the other site will have the same , cannot edit it differently . Is that possible ?
Working on one now along with a few others! Stay tuned! I’m just getting started and learning the ways of UA-cam but loving the process so far. Thanks for watching 🫡
Hey, thanks for the video! :) I applied 100% width to the container and auto to both margins (on base breakpoint) and it only makes the container reach all the way out to the screen edges on phone landscape and portrait. Nothing happens to tablet and up. The annoying built in margin/padding to the left and right of brand/links are still there. Any idea why? :)
Check max-width on the container. When using percentage it will be relative to any parent divs that have a width set. So if your container has no max width and the width is set to 100% and for example container is inside of nav…then if nav has a max width or width it will be 100% of whatever that value is. Also check for any padding on any div that the container is in!
@@MilesRoxas Thanks for the quick reply! Really appreciate it! :) I have removed all float, the navbar is set to 100% width, the container is set to 100% width and margin auto, and the flex box inside the container is set to 100% too. All float is removed, no margins or padding anywhere. When looking at the blue and orange lines around the divs, it shows that the navbar is reaching the end of the screen as expected, but for some reason the container does not reach out all the way. It still leaves some space in the beginning and end?? So weird. I noticed in your video that after you said to create a flex box inside the container if u need it, you seem to have removed the flex box for the rest of the video and it shows that brand/nav/menu are just in the container - and it also shows that there is the same spacing at the edges that I get, even though u set the container to 100% and margin auto earlier in the video? So it looks like the same issue as mine shows up in the video? Thanks! :)
I figured it out. But the solution is frickin' crazy. There is a HIDDEN max width to the container!! It showing no max width, but you actually have to click no max width for the setting to take place! That is insane. What a crazy bug. Thanks for your input though! :)
6:38 my recommendation just keep the container for specifying max width and margin auto. Then create a new div where you apply flex box to control your layout. Hope that helps!
I spent HOURS trying to fix the container with flex and space between. Thanks a lot for the explanation ❤ Also great video style, keep it up!
Thanks man! Let me know if you ever run into issues. Here to help 💪
same here!
Thank you for this in-depth dissection of this extremely difficult-to-grasp component in Webflow. You quickly make waste of what we DO NOT need. Exactly what I am looking for. Understanding what NOT to mess with in Webflow is the key to moving from amateur to advanced. Looking forward to more nav tutorials. Subscribed!
Maaan I struggle so hard on the nav even after two ears into Webflow. This explains a lot!! Thank you so much ❤
I'm giving webflow I try to build my clients' websites because many say it is much easier than coding like I regularly would. But I have to say, it already seems more overwhelming. Keep up the good content bro!
Thank you so much for this! I'm glad I'm not the only one who spent hours trying to figure out why flex weren't working as expected on containers.
This is great bro! Would love to get a video of your creating an amazing Navbar start to finish! Fantastic video.
I desperately needed a video just like this. Good looks brotha.
Omg thank you so much I was going crazy with this nav situation! And it's all fixed now
I did it im number 100K best of luck man on the journey
I once tried to make my own navbar by de-constructing the Webflow component and...
I'm still having nightmares.
Float. Of COURSE, it was set to fricken float. I never even noticed that.
Gah.
(And thank you, great video :) )
Thankyou for sharing your experience with navbars!
maannn I love the way you explain things like we're you're close friends. also very interesting video, helped me a lot! thanks :)
We’re all friends! 🎉 and I’m here to help. glad you enjoyed it more to come soon!
Thank you very much for this! Keep an eye out for new videos.
Beautiful tutorial ... 10/10
Great Job! I look forward to your new tutorials.
TIL you can have two menu buttons! Great video - thanks!
You can have a million and it STILL works 🎉 magic 🪄
you saved me, thank you!!!!
quality info. thanks miles
🫡
I just started webflow a week ago im 15 I have a very basic foundation of knowledge when it comes to building on webflow, and i just wanted to know what you would reccomend for me ( building navbar from scratch or with component ), i saw this video and another one of how to build from scratch, is it possible to build the same navbar from scratch as you can build from the component, and i just wanted to know what you would reccomend for a 15 year old trying to build a website. And one more thing, i want to build a normal casual website nothing really crazy ( for a clothing brand ) can i make something casual on webflow because i know is mainly more for fancy websites.
love your vibes
Some great tips! Thanks
Thank you for a great tips :)
Awesome video.
nice lookin video man, that coming from somewhere too
good stuff man, thanks for this
You're addressing a great pain point but to be honest, at this point, there are so many little hacks that are easy to forget that I'd still just rather go with a custom navbar made out of pure divs and webflow animations + JS
May somebody know how to make a Navbar , that has different appearance on the other site . Because i have transparent navbar for home site, and white lettering , of course the other site will have the same , cannot edit it differently . Is that possible ?
Sooooo good 👍
Great video, it doesnt feel like you hve less than 1k subs, you have potential
Can you do a video where you do an awwward winning nav menu ?
Working on one now along with a few others! Stay tuned! I’m just getting started and learning the ways of UA-cam but loving the process so far. Thanks for watching 🫡
Thank you
Hey, thanks for the video! :)
I applied 100% width to the container and auto to both margins (on base breakpoint) and it only makes the container reach all the way out to the screen edges on phone landscape and portrait. Nothing happens to tablet and up. The annoying built in margin/padding to the left and right of brand/links are still there. Any idea why? :)
Check max-width on the container. When using percentage it will be relative to any parent divs that have a width set. So if your container has no max width and the width is set to 100% and for example container is inside of nav…then if nav has a max width or width it will be 100% of whatever that value is. Also check for any padding on any div that the container is in!
@@MilesRoxas Thanks for the quick reply! Really appreciate it! :)
I have removed all float, the navbar is set to 100% width, the container is set to 100% width and margin auto, and the flex box inside the container is set to 100% too. All float is removed, no margins or padding anywhere.
When looking at the blue and orange lines around the divs, it shows that the navbar is reaching the end of the screen as expected, but for some reason the container does not reach out all the way. It still leaves some space in the beginning and end?? So weird.
I noticed in your video that after you said to create a flex box inside the container if u need it, you seem to have removed the flex box for the rest of the video and it shows that brand/nav/menu are just in the container - and it also shows that there is the same spacing at the edges that I get, even though u set the container to 100% and margin auto earlier in the video?
So it looks like the same issue as mine shows up in the video?
Thanks! :)
I figured it out. But the solution is frickin' crazy. There is a HIDDEN max width to the container!! It showing no max width, but you actually have to click no max width for the setting to take place! That is insane. What a crazy bug.
Thanks for your input though! :)
is Webflow nav accessible?
Hey man, flexbox doesn't seem to work on my nav menu (when it becomes a drop down) do you know why this may be?
Hey send over a read only link happy to give it a look!
So damn helpful.
Ok, if dont use the float menu, then what we instead?
Position elements using display flex
Has webflow ever come up with an answer about 6:22?
show us how to not use the float thennn
6:38 my recommendation just keep the container for specifying max width and margin auto. Then create a new div where you apply flex box to control your layout. Hope that helps!