How can I make the nav bar go full width in Webflow when the built-in container is restricting it?
TL;DR
- Move the Navbar outside the Container to allow full viewport width.
- Remove the Container if it's wrapping the Navbar and ensure Navbar width is 100% with no max-width constraints.
- Optionally, center inner content by adding a Div Block inside the Navbar with a max-width and auto margins.
Your navbar is restricted in width because it's placed inside Webflow’s built-in Container, which has a fixed max-width by default.
1. Move the Navbar Outside the Container
- Select the Navbar element in your Webflow project.
- In the Navigator panel, drag the Navbar outside of the Container (into a section or directly inside the Body).
- This action allows it to span the full viewport width by default.
2. Remove Container if It's Wrapping the Navbar
- If your Navbar is nested in a Section → Container → Navbar structure, remove the Container:
- Select the Container, right-click, and choose "Unwrap element" (or manually copy/move the Navbar out and delete the Container).
- Place the Navbar directly in the Section or create a Div Block and set it to full width:
- Display: Block (default)
- Width: 100%
- Max Width: None or 100%
3. Adjust Width Settings to Ensure Full Width
- Select the Navbar element.
- In the Style panel:
- Set Width to 100%.
- Remove or reset any Max Width constraints (set to none).
- Make sure Position is not restricted (Relative, Static, or Fixed are fine).
4. Center Navbar Content (Optional)
- If you still want the navbar’s inner links/logo to stay aligned with the content:
- Add a Div Block inside the Navbar.
- Set max width (e.g., 1140px) and margin to auto for left/right.
- Place your logo and nav links inside this inner wrapper.
Summary
To make the navbar go full width in Webflow, move it outside the default Container, ensure its width is set to 100%, and remove any max-width constraints. Wrap its internal content in a centered div if needed.