Content area dropdown not on top

[nosomano]

Hey there,

I’m having an issue with the content area dropdown element. It has a white background set so it’s not a transparency issue, it just appears to show up below other elements which makes it reasonably hard to read. Is there a fix for this?

The “Info” bit is also not getting centered no matter what I try.

Thanks for the help!

[mldarshana]

Hi There,

Upon testing, I can confirm the issue on my end as well. Could you please try adding the following CSS rule into your Theme Options > Global CSS area.

.page-id-4400 .x-column {
    z-index: unset;
}

Hope that helps.

[nosomano]

I tried this but it didn’t help - see picture after clearing page and local cache.
@mldarshana
The issue is in .x-column has z-index: 1 - if I ditch that, it works, but the problem is that I can delete it, but with any update, it’ll be back. Also it’s a lower number so it shouldn’t get prioritised in the first place. I am not sure how to overwrite it in a way so it works on the long run. Also it’s only for nested elements - I think later sibling elements always overlap earlier elements if they have any z-index assigned, and only don’t if they have none at all.

I’m sorry but this theme’s auto generated css seems like it has a billion properties thrown everywhere for shits and giggles. Really annoying to overwrite - why do these elements have z-index in the first place? It’s like one of those tamper-proof bombs that are designed to go off in your face if you try to disable them.

[nosomano]

I solved this in the end by setting the z-index of the entire first row higher than the second row.

[jumar]

Hello @Lerf,

Glad to hear that!

Please add these styles below into your Pro > Launch > Theme Options > Global CSS area, as well.

I’ve just changed the z-index value to zero and “Intro” text is now on the center.

.page-id-4400 .x-column {
    z-index: 0 !important;
}

.page-id-4400 .el29.x-anchor, .el37.x-anchor, 
.page-id-4400 .el45.x-anchor, .el53.x-anchor, 
.page-id-4400 .el61.x-anchor, .el71.x-anchor, 
.page-id-4400 .el80.x-anchor, .el88.x-anchor, 
.page-id-4400 .el96.x-anchor {
    width: 100% !important;
}

Updating the PRO theme wouldn’t delete the settings set in Pro > Launch > Theme Options. These settings are all added in the database. However, it’s a good practice for us to create a complete backup first of the site so as to make sure everything is okay.

Please let me know if you have further inquiry.

Thanks!

[nosomano]

That helped! But now we are having a problem on mobile. I set descending z-index on all the columns and it’s fine on pc but they still seem to be having the same issue on mobile. Any way I can fix this our should we drop this element all together?

[christopher]

Hi there,

I suggest that instead of adding the z-index: 2 !important; in the Column Inline CSS, you add a class to that column such as zindex2 then add the CSS code below:

@media (min-width: 767px) {
	.zindex2 {
		z-index: 2 !important;
	}
}

Do that for the other columns. The difference is that it will keep the z-index stuff to the desktop and tablet and it will not show in the mobile to have that problem you are experiencing.

Thank you.

[nosomano]

Hey @christopher.amirian
I did what you recommended (leaving out the mobile specific bit as that wasn’t the issue I asked about - we need the cards to be legible on all platforms) and it seems to be working now. Thank you!

[ruenel]

You’re welcome!
We’re glad we were able to help you out.