Full Width Nav List but Main Nav Centered to 1279px?

Design help Layout & Design
1

Hi there! Need some much-needed help on my current project :slight_smile:

Trying to keep my navigation elements within a 1279 px width but increase the width of the dropdown navigation list to a full 100% width.

Want the Navigation List elements to remain in the same position they currently are in (1279 px max width) but just want the white nav list space going full width.

The Navigation List is set to Absolute to stick with the movement of the main navigation e.g. when you scroll down the top banner (Search, About & Log In) scrolls away which causes the Main Nav to move up so a Fixed position Navigation list wouldn’t work.

Because of this though it’s being contained to the “M / Navigation / Container” 1279 max width.

Any thoughts now on how to solve this issue?

Webflow - Navigation List Full Width Issue
Webflow - Navigation List Full Width Issue1920Ă—1080 271 KB

Here is the published test link: https://raanz-site-test.webflow.io/

Many thanks!

Here is my site Read-Only: [Webflow - RAANZ Website][1]

2

hi @Jacob_Blair here is a hint you can take as a starting point. all it takes are 2 lines of CSS.

CleanShot 2023-04-10 at 17.51.18
CleanShot 2023-04-10 at 17.51.181920Ă—990 183 KB

3

Hi @Stan , thanks for the help!

Unfortunately, I have implemented the Top Banner (Search, About us & Log In) to disappear when you scroll down. This causes the Main Nav to move up so a Fixed position Navigation list wouldn’t work. As seen below.

Fixed Position Won't Work
Fixed Position Won't Work1918Ă—938 97.3 KB

4

hi @Jacob_Blair here is a video that may help you to understand how it can be done.

1 Like
5

You’re amazing @Stan! Wow overlooked a very simple stacking issue :sweat_smile:

Really appreciate the time to make that video and help me out with this, thank you so much, all sorted now!

1 Like