Webflow Navbar Not Fitting? Easy Fix Without Adding Breakpoints

[@HamzaMajeed-h8k]

After watching your video, I always realize that I know nothing about Webflow.😅

[@ivanbadia3232]

I've been controlling my desktop nav wrong all this time. Thank you, T. Ricks, for this solution.

[@timothyricks]

So glad this helps! 🙂

[@Entersge]

I dunno how it works but literally when I get stuck with something here you are with the solution! Wild! Thank you so much!

[@timothyricks]

I'm so glad this helps! Someone in my community had this issue recently so videos like this usually come from questions that other people are asking.

[@pelangos]

Thank you Tim! This sounds like the proper way to create a webflow navbar. It also helps with ADA / accessibility issues. I've been reading all about shopify store owners getting sued because their theme templates aren't developed correctly. Anyways great tips again.

[@JackGSF]

Funny, cus I was working on this issue today for the first time. Thanks for the solution!

[@timdaff]

Awesome solution! Thanks Tim

[@gitaadi]

THIS IS GOLD! Thanks Tim!

[@tjk_9000]

this is so clutch

[@jordankromwell]

Awesome! But how to make this work with dropdowns ?

[@macenziweb]

Can this solution cause SEO issues? Thank you Tim

[@timothyricks]

Hi, this shouldn’t negatively impact SEO since the links are the same in both instances. Here’s a detailed explanation. chatgpt.com/share/66e43c42-0d40-8011-a462-1c97d6fa4abc

[@scottruigrok5986]

Good question. I am wondering the same. Also replying so I get notified about the answer.

[@the-secrettutorials]

You legend!

[@mislavrepinac]

Very helpful! I'm just wondering if it's a problem to have two navbars in the document?

[@timothyricks]

Thank you! It’s common practice to have multiple nav tags on the same page. Anything that holds navigation links should be wrapped in a nav tag including links inside a footer.

[@TristanDummer]

Hey Tim, this is super helpful, thank you. I have cloned the file but notice that even in your example at around 1100px the burger menu shows, however the dropdown content is from the desktop version (and not styled like the mobile nav variation) and not the mobile nav. Any ideas how to fix this?

[@timothyricks]

Hi Tristan, I'm glad this helps! I'm not able to recreate this issue in the cloneable. It's showing the mobile dropdown styles correctly for me. If you've copied the component from the cloneable, it probably didn't copy the "is-mobile" classes that are needed to show the mobile styles.

[@TristanDummer]

@@timothyricks ​ Hi Tim, thanks for getting back to me. The "is-mobile" is in there for sure. Another way to explain it is there is about 80px between the two navs switching where a combination of the burger menu nav and the expanded nav combine in styles. Would the fact I have your css auto height dropdown in there be an issue?

[@EthanSuero]

YOU'RE THE MAN!

[@fuster7474]

But is it recommended to use Webflow's native navbar component? I've been building it myself with divs without using it and I always thought it was the best way to work with it.

[@timothyricks]

The same process works with custom navbars also. Webflow native navs and custom navs both work well, but a custom one usually offers more control.

[@luqmanhabibulhaq2964]

but how to do that for phone ressolution?

[@timothyricks]

It automatically switches to the mobile view by the time we get to a phone resolution because of their small screen size.

[@luqmanhabibulhaq2964]

@@timothyricks so i have a collection list 8 item in two row, then i watched on phone its just make a bigger view scroll down, is that normal? or what i should do for make that seems like in pc desktop?

[@timothyricks]

@@luqmanhabibulhaq2964 The menu might need a max height using VH and overflow auto so that it doesn't get too large and so we can scroll inside it. If you have a 2 column layout, you could manually reduce it to 1 column on a smaller breakpoint, but using an autofit grid would be better so that the column count automatically reduces based on the space available, not just screen size.

[@nacakcii]

You are the best

[@timothyricks]

Thank you! So glad this helps!