Dropdown Falling Behind Div

Hi everyone!

I’m at a loss with my site that has a dropdown in the main header nav.

On the Homepage it works perfectly across all screen sizes, with the dropdown overlaying all other content.

However, on every other page it falls behind the div containing the page title. Even though the z-index for all the elements is exactly as it is on the homepage.

If anyone can figure this out for me I will be eternally grateful - I’m at my wits end!

Thanks in advance. J


Here is my public share link: https://preview.webflow.com/preview/gingerlily-hair-beauty?preview=473091b1855a3ae98d1dcd40b6a1be2b

(how to access public share link)

I don’t think I’m seeing your problem. I see…

  1. A dropdown menu for “Beauty” on desktop view working properly
  2. On all other views, a mobile ‘hamburger’ menu that seems to overlay all content sliding out from the header as normal.
  3. The submenu under Beauty works fine too.

I’m having this same issue on my site:

https://preview.webflow.com/preview/inked-for-peace?preview=450fe8aa53e87a0279d9f610215b65aa

But the preview is very different from the published page:

http://inked-for-peace.webflow.io

1 Like

Whoops…just figured it out. Each tab was properly set on the z-index, but the entire navigation drop down was not. Once set to the same value…it was above the page title.

2 Likes

Hi dniolet - do you mean you managed to do this on my preview or your own?

I’ve just checked it on my version and still can’t get it to work. Do you mind explaining exactly what you did?

Many thanks

@JamesLondesborough, I got it to work on yours too. Attached image should help.

1 Like

Thanks @dniolet great help

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.