Header with Image + Navbar Z-Index Issue

Look at “Nav Z-Index Issue” page:

https://preview.webflow.com/preview/support-sandbox?preview=e25ca18d4f82de9c6dcc6730ea9cd628

I would like to have a slim header area above the navbar. In the header area, I’d like a logo centered, and positioned negatively so that it overlays the navbar (where I’m going to create two nav menu wrappers so I can position to menus left and right, leaving room for the image overlay.)

Here is a screenshot:

Seems like everything I tried (setting z-index, relative, abs, etc.) has the same effect as appearing under the navbar.

What say the experts?

This is resolved.

I ended up inspecting the Webflow CSS to see if a Z-Index was hardcoded, and sure enough, the Nav widget has a Z-Index of 1000 – but the UI does not indicate this unless you give it a class.

Duh.

Changing my logo to a Z-Index of 1001 resolved it.

2 Likes

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