How to Use the Webflow Navbar to Make Award Winning Menus
HTML-код
- Опубликовано: 20 май 2024
- In this video, we'll go over the quirks of the Webflow Navbar. By understanding how all the individual elements work and the default functionality Webflow provides, you'll unlock how to create award-winning experiences.
Interested in working together? Check out my agency and schedule a free project consultation today.
Learn more at: www.suits-sandals.com/
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 💪
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!
Omg thank you so much I was going crazy with this nav situation! And it's all fixed now
Maaan I struggle so hard on the nav even after two ears into Webflow. This explains a lot!! Thank you so much ❤
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.
Thankyou for sharing your experience with navbars!
Great Job! I look forward to your new tutorials.
I desperately needed a video just like this. Good looks brotha.
Some great tips! Thanks
good stuff man, thanks for this
Awesome video.
Beautiful tutorial ... 10/10
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!
Sooooo good 👍
love your vibes
Thank you for a great tips :)
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!
you saved me, thank you!!!!
Thank you very much for this! Keep an eye out for new videos.
quality info. thanks miles
🫡
So damn helpful.
Thank you
nice lookin video man, that coming from somewhere too
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 :) )
is Webflow nav accessible?
I did it im number 100K best of luck man on the journey
TIL you can have two menu buttons! Great video - thanks!
You can have a million and it STILL works 🎉 magic 🪄
Has webflow ever come up with an answer about 6:22?
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 ?
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! :)
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!
Ok, if dont use the float menu, then what we instead?
Position elements using display flex
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
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 RUclips but loving the process so far. Thanks for watching 🫡
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!