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!

[@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 ❤

[@hasan_mangrio]

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

[@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!

[@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! ❤

[@Colossus177]

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

[@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!

[@reymundoalvarez380]

Niceee, this is what I was looking for!

[@bowiejackson]

Thankyou for sharing your experience with navbars!

[@carolinejaworsky3331]

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

[@attrapehareng]

I've spent almost a day trying to figure out why my items were not positioned from left to right and were centering on mobile on my nav bar. I should have discovered your video earlier !

[@spectreisland5387]

Beautiful tutorial ... 10/10

[@des7638]

quality info. thanks miles

[@MilesRoxas]

🫡

[@robinstuart8941]

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

[@Andres-Estrella]

would also like to know

[@BrentDavidson-b8g]

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

[@Andres-Estrella]

wow thanks for this

[@MacGriff603]

Great Job! I look forward to your new tutorials.

[@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?

[@andronova_videos]

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

[@jakubfrankovsky6983]

Thank you for a great tips :)

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

[@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 ?

[@byDisenyo]

Some great tips! Thanks

[@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

[@rightpadding]

is Webflow nav accessible?

[@pedropacheco6876]

you saved me, thank you!!!!

[@okvy]

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

[@DomenicoMarcoDiDonna]

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

[@SimonPhetersky]

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

[@MilesRoxas]

Position elements using display flex

[@izzygrandic]

Awesome video.

[@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!

[@davidgoult8694]

love your vibes

[@adarogu]

good stuff man, thanks for this

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

[@kevynlevine]

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

[@MilesRoxas]

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

[@jdanielortega]

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

[@TheAcSstudio]

nice lookin video man, that coming from somewhere too

[@rayjdao]

@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.

[@duncanmccabe3721]

Sooooo good 👍

[@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

[@jetbob309]

Thank you

[@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 🫡

[@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!

[@_b_zer]

So damn helpful.

[@ethelquinn]

Unless you're a super pro - like me. You're so cringe man.

[@MilesRoxas]

Yea that was bad…first couple of KZbin videos are tough to watch…one of these days I’ll get it dialed in…