Z-index issue with cookie pop-up

[readysteadygeek]

Hi there,

I have recently added a cookie policy pop up to my site. Although I know you don’t provide support for other plugins, it’s not actually the plugin I need to change. When the pop-up loads, it appears it sits behind both the header and the creative CTA at the bottom of the page. Oddly, not the rest of the footer, just the CTA.

I’ve tried amending the z-index for the CTA and the headers and can’t seem to find a way to make them sit behind this cookie pop-up. I am quite new to amending CSS so I may be doing something wrong.

Could you please advise what custom CSS would be needed on the site (I assume it’ll need global CSS?) to fix this?

Method Training | Personal Training | Online Training

Thanks in advance.

[ruenel]

Hello James,

Thanks for writing in! I have inspected your site and it appears that you are using GDPR Cookie plugin that launches the modal pop for your Privacy Policy. I found out that the lightbox or modal is using 9990 as the z-index. Be aware that by default, the bars in your your footer uses 9999 as the default z-index value. To resolve this issue, you will have to edit your custom footer and change the z-index of the bars to 9989 or less so that the Privacy Policy modal will be on top of all the other elements on the page.

We would love to know if this has worked for you. Thank you.

[readysteadygeek]

Hi there,

Thanks for your reply. I can confirm for the main white pop-up that’s worked perfectly, thank you.

Unfortuantely the cookie banner (that appears when you first visit the page) still experiences the same issue. It now appears partly opaque over the main footer area but still completely behind the creative CTA element still. See image.

I assume it’s still just a z-index issue, but I’m not sure why the bar containing the creative CTA is behaving differently to the other bars on the footer?

If it helps, that banner also doesn’t appear in front of the header either, until you scroll beyond it, although I’m happy with that, it would be useful to know what to change if I wanted it to appear in front of the header too, as I assume the issue is the same?

Many thanks

[rad]

Hi James,

The z-index only works to sibling elements of the current parent, given that cookie is a different element than footer, then it may only work on some cases, like it on a modal popup. And with that, you’ll have to add another fix, but this time for your cookie floating bar. Please add this CSS to Theme Options > CSS

#moove_gdpr_cookie_info_bar.moove-gdpr-dark-scheme {
    z-index: 9999;
}

Again, this is 3rd party related and we don’t maintain any code that was provided. You may check this thread Changing blog post text size in CSS affects Navigation Collapsed and Classic Feature List elements as well for creating custom CSS with proper selectors.

Thanks!

[readysteadygeek]

Hi there,

I understand and that makes sense. Thanks very much for providing that. I was having difficulties identifying what element to target to change the z-index value of the bar itself. You’ve been really helpful, thanks very much!

Thank you!

[nabeel]

Hey James,

To find out the right selectors, you can use Chrome’s DevTools , here are couple of resources that can help you with this:

• How to get CSS selectors - https://goo.gl/BmoH39
• Get Started With Viewing And Changing CSS - https://goo.gl/7xFhDa

To learn more about z-index property please see https://www.w3schools.com/cssref/pr_pos_z-index.asp

We’re glad that we could be of help. Cheers!