How to Use the Webflow Navbar to Make Award Winning Menus

[@gonruiz5416]

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!

[@MilesRoxas]

Thanks man! Let me know if you ever run into issues. Here to help 💪

[@puyakhalili]

same here!

[@reymundoalvarez380]

Tear tear. I was trolled by the float and clears, relative positions and padding and default layout on the link blocks and more lol. All is well now HalaluYahuah, this was a video blessing, thanks Miles! Keep it up! ❤

[@jamesmonroedesign]

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!

[@rohmberger]

Maaan I struggle so hard on the nav even after two ears into Webflow. This explains a lot!! Thank you so much ❤

[@sindreskoglundhansen]

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.

[@reymundoalvarez380]

Niceee, this is what I was looking for!

[@hasan_mangrio]

I desperately needed a video just like this. Good looks brotha.

[@Colossus177]

This is great bro! Would love to get a video of your creating an amazing Navbar start to finish! Fantastic video.

[@BrentDavidson-b8g]

Thank you!! I can't believe they haven't made a more capable nav component.

[@Diego_Cabrera]

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!

[@robinstuart8941]

Great video. How do you deactivate scroll when the nav fills screen?

[@Andres-Estrella]

would also like to know

[@bowiejackson]

Thankyou for sharing your experience with navbars!

[@DomenicoMarcoDiDonna]

Mike this should go into the Webflow University, under the category "Webflow Voodoo"

[@user-yf5yy4uk9n]

Hello, thanks for making this video, it helped me a lot but still have a few areas that I find really challenging. I don't know if there has been an update that affects things but I have found that as soon as I swap out the nav links for link blocks, my div that contains them becomes totally unresponsive to any Layout changes (only in the open burger menu), even setting it to None has no affect. If I put back the nav links, it all goes back to normal default layout. Also found that container really annoying, can you just replace it with a div?

[@QueenOfFamous]

maannn I love the way you explain things like we're you're close friends. also very interesting video, helped me a lot! thanks :)

[@MilesRoxas]

We’re all friends! 🎉 and I’m here to help. glad you enjoyed it more to come soon!

[@andronova_videos]

Thank you very much for this! Keep an eye out for new videos.

[@MacGriff603]

Great Job! I look forward to your new tutorials.

[@carolinejaworsky3331]

Omg thank you so much I was going crazy with this nav situation! And it's all fixed now

[@kevynlevine]

TIL you can have two menu buttons! Great video - thanks!

[@MilesRoxas]

You can have a million and it STILL works 🎉 magic 🪄

[@rightpadding]

is Webflow nav accessible?

[@MarkFaamaoni]

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 :) )

[@spectreisland5387]

Beautiful tutorial ... 10/10

[@magnusfroidh9191]

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? :)

[@MilesRoxas]

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!

[@magnusfroidh9191]

@@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! :)

[@magnusfroidh9191]

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! :)

[@okvy]

I did it im number 100K best of luck man on the journey

[@Andres-Estrella]

wow thanks for this

[@des7638]

quality info. thanks miles

[@MilesRoxas]

🫡

[@byDisenyo]

Some great tips! Thanks

[@jakubfrankovsky6983]

Thank you for a great tips :)

[@LukasHerzog-222]

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 ?

[@pedropacheco6876]

you saved me, thank you!!!!

[@davidgoult8694]

love your vibes

[@sanjivinsmoke3261]

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.

[@AndresOrtiz-ti6gb]

look up webflow university and watch their courses on making websites

[@izzygrandic]

Awesome video.

[@TheAcSstudio]

nice lookin video man, that coming from somewhere too

[@adarogu]

good stuff man, thanks for this

[@lukewjames]

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?

[@MilesRoxas]

Hey send over a read only link happy to give it a look!

[@SimonPhetersky]

Ok, if dont use the float menu, then what we instead?

[@MilesRoxas]

Position elements using display flex

[@jdanielortega]

Has webflow ever come up with an answer about 6:22?

[@duncanmccabe3721]

Sooooo good 👍

[@Opsdead]

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 ?

[@MilesRoxas]

Working on one now along with a few others! Stay tuned! I’m just getting started and learning the ways of KZbin but loving the process so far. Thanks for watching 🫡

[@jetbob309]

Thank you

[@spiderone_]

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

[@rejointrident]

@6:55 "i recommend keeping the container here and apply normal container type properties to it". what the hell does this mean? i've been fighting with this fucking container for hours to stretch 100% w.

[@_b_zer]

So damn helpful.

[@max-zb1io]

show us how to not use the float thennn

[@MilesRoxas]

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!