[Support request] Post Content showing in front of sticky navigation

[David]

Hi,

I’m having trouble with sticky navigation on one of my sites. It goes behind post content when scrolling down.

I have Simple CSS installed but I can’t seem to target the right class or ID to set the z-index higher. I tried it in Developer Tools on Chrome and it seemed to fix the issue, but i don’t know what class or ID to add it to in Simple CSS to fix it on my site.

Cheers,
David

[Leo]

Hi David,

Is there a specific page I should be looking at?

The single product page you linked doesn’t seem to have any problems.

Let me know 🙂

[David]

Hi Leo,

Sorry, I was testing out a different fix for it and it seemed to have worked. I have removed the fix now if you can have another look. Just in case I run into more trouble with it.

Thanks
David

[Leo]

Still don’t think I’m seeing the issue.

Am I missing something?

[David]

Hi Leo,

When you scroll down, the image and text under the description tab show in front of the sticky navigation. I need to set the z-index for the sticky nav higher than 100 to fix the issue.

You might see what I mean a bit clearer on this product: aintnailz.ie/store/products/gel-nail-technology/

When you scroll down the sticky nav bar goes behind the content thats under the description tab.

I cleared cache on my site just in case.

Thanks again for your help,
David

[David]

Hi there,

try this:

.mp_product .mp_product_tab_content-current {
    z-index: 90 !important;
}

[David]

Hi David,

I tried the code above and it worked, thanks a million. Here’s the fix I came up with:

.mp_product .mp_product_tab_content-current
{
	z-index: 99;
}

Does it matter which class I target, mp_product or the generatepress sticky nav? I’m just curious.

Thanks very much for your help. Great support as always 🙂

David

[David]

You can increase the z-index of the navigation to achieve the same results.
In this instance the tabs are the problem so better to fix it at the source.

[Author]

Posts