Dropdown full-width is overlaying other elements

Hi there!

I want to create a Navigation with a dropdown (my class: nav-menu-1), and have been blocked now after several tries.

So in my navigation (class: nav-menu-1), each point is a dropdown. When the dropdown is open, I would like to have it in full width (I achieved this with position fixed, and position right and left 0).

My 1st question is if there is a better approach, as when I scroll the screen the full width box will now stay there.

But the next bigger problem, my 2nd question, this full width box is now overlaying my other elements on the left side. For the purpose of seeing it better, I changed the elements colour into a light red.

I seem to miss something. Also, my body has on purpose a padding of 60px on the left and right side (as my pictures go out by 60px on each side).

My Project: https://jennifers-first-project-4ebd02.webflow.io/

Share read only: https://preview.webflow.com/preview/jennifers-first-project-4ebd02?utm_medium=preview_link&utm_source=designer&utm_content=jennifers-first-project-4ebd02&preview=8ee83454ce587eedd7db5d1338cc915e&mode=preview

1 Like

Hello.
On ‘dropdown-full-witdh’ set the width to ‘auto’ not 100VW. Then it will only take as much space as it’s content.

Hi @HGWeb thanks for your reply, very appreciated. I tried it out and changed the width into ‘auto’. Nothing changed. The dropdown full width container is still overlaying the other navigation menu’s as shown in my screenshot.

Hello.
And set Position to ‘Absolute’ - Top. Then it works on my screen!

I did it. But now the dropdown has not the full width anymore, as it’s only taking the space around the text. But my goal was that the dropdown has a full width.

Thats how it look now:

Did you find a solution?