Pushing Grid to Span Screen Width

[treeactionseattle (Julia)]

Hi! I’m very new to Webflow and website designing; I’m getting started with building a website for a non-profit I’m starting. I’m trying to create a navigation pane with a centered logo that has a drop-down on the side for additional menu items (somewhat like this demo site).

I’ve copy/pasted the hero section and nav bar from the demo site and made some style changes. However, the navbar will not adjust to the full screen width at larger screen breakpoints. Any ideas on why this would happen and how to make the navbar span the full screen?

Read-only link here.

Thank you so much!

[AlexPanos]

Hello Julia.

I have checked your site and I have found a couple things.

If you want to achieve that result I suggest you do the following:

• Remove the height and max height from your navbar.
• Remove the left percentage you have on the navbar’s fixed position.
• Make the grid a 3 column grid, 1fr each column so they all align nicely and the logo stays in the middle all the time.

It should work if you do this, give it a try and let me know!

[treeactionseattle (Julia)]

@AlexPanos thank you so much for the quick response & help!

I’ve made the edits as you suggested, but I’m now seeing the navbar pushed to the right-hand side in all of the screen breakpoints. Any idea how to adjust it to be centered, and span the width of the screen?

Thanks again!

[AlexPanos]

Hello again Julia!

Try the following as well:

• Remove set width on navbar. Set it to auto.
• Set width to auto on the navbar wrapper.

I have done this and it has worked for me. Let me know how it goes.

[treeactionseattle (Julia)]

Hi @AlexPanos ! Thank you for the suggestions. Unfortunately, I’m still getting the same issue (see screenshots.) Any other ideas? Really appreciate the help!