Need a full width Navbar

Hi everyone,

https://preview.webflow.com/preview/kw-costumes?utm_source=kw-costumes&preview=5d58ee79258c6af9741de5e41b33941e

I’m trying to get the nav bar to go full width, but the built in container won’t allow it. Is there a way around this?

Thank you,
Mike


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Easiest way around that is creating a custom div instead of a container. That way you don’t have to mess with custom code or tricks with classes

Just a question on this. How do you get the custom Div to collapse into a hamburger on smaller devices?

You need to use animations to create that behavior. That’s the “not so great” part of using custom divs. You need to do the whole work yourself. (Which for me is not a problem if it means that I get to have control over the behavior of things)

Thanks @Jeandcc - another suggestion I have just come across, should it help anyone - set the min width of the Nav’s container to 100%.

1 Like

@Roxzfr Thanks for posting your solution. That helped me a lot - I was going crazy trying to figure this out. I don’t really understand why setting the width to 100% doesn’t work, but setting the min width does. Any idea ?

That has been puzzling me as well! Sorry I don’t know but maybe someone else does?

This is a better solution found from some years ago.

“You certainly can! If you move the elements (i.e. Brand, Nav Menu, Menu Button, etc) out of the defaulted container (but still in Navbar) it will still work! Using the ‘Navigator’ tab would be the best bet. The after will look like this (basically the same, just everything moved out of the container):”

3 Likes