Z-index issue: product list covers header menu

[salilou]

Hi,
I have an z-index issue: the Woocommerce product list covers the header menu:

Hannes Kreuziger

Screenshot:
https://capture.dropbox.com/MvC0QT0Ib1vKKqbd
I have checked the z-index values but could not find a conflict.
Hope you can find it.
Best regards,
Hannes

[tristup]

Hi Hannes,

Thanks for reaching out.
I have checked your website but didn’t find the issue you described here. If you are still having this issue, please mention the device, browser name and version, and also the operating system you are using, which helps us to replicate the issue at our end.

Thanks

[salilou]

I still have the issue.
MacBook Pro, up to date
Safari & Firefox, up to date
On the shop page the content covers the menu header.
https://capture.dropbox.com/FyTRuqSoGeEdLdvW

Go to:

Hannes Kreuziger

Decrease the browser width to 600px.
Scroll up.
Issue: the content covers the logo image and menu icon .

Best regards,
Hannes

[prakash_s]

Hello Hannes,

It seems that it is an issue with the z-index I would suggest you go to the Header builder and set the header bar z-index as 9999.

In case it doesn’t work, you need to purge all the cache and clear your browser cache and then recheck it. Or for a quick fix, I would suggest you go to Header Bar —>customize —>element CSS and add this custom CSS code.

 $el.x-bar.x-bar-top {
    z-index: 9999;
}

The purpose of providing custom CSS is to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector or you subscribe to One where customization questions are answered.

Hope it helps.
Thanks

[salilou]

Thank you.
The first hint did not work.
But the second.
Strange, but done.
Thank you very much!

[marc_a]

Hey @salilou,

You’re most welcome!