Display cookie banner above other floating elements

According to privacy regulations, you must expressly ask users to expressly accept cookies before continuing to browse your website, but this is easier said than done, and I’m not talking about blocking cookies.

Sometimes the cookie banner has to coexist with other elements on the page, especially on mobile devices, which sometimes prevents it from displaying correctly, because there are other elements that cover it.

The first thing to do is to check if any of the other elements have a setting to define the display priority. It is rare, but you can find it sometimes.

The other possible solution is to force the display of the cookie banner using code so that it is displayed in front of the other elements.

The plugin that I recommend for cookies, GDPR Cookie Compliance, offers this code to prevent other elements from overlapping in front of the cookie banner:

/* Prevent other elements from covering cookies */
add_action('moove_gdpr_inline_styles','gdpr_cookie_css_extension_zindex',10,3);
function gdpr_cookie_css_extension_zindex( $styles, $primary, $secondary ) {
$styles .= '#moove_gdpr_cookie_info_bar { z-index: 99999999; }';
$styles .= 'body.moove_gdpr_overflow #moove_gdpr_cookie_info_bar { z-index: 9900; }';
$styles .= 'body.moove_gdpr_overflow .gdpr_lightbox { z-index: 999999999; }';
return $styles;
}Code language: PHP (php)

To learn how to use this code check this simple guide:

How useful was this post?

Click on a smiley to rate it!

Average rating 0 / 5. Vote count: 0

No votes so far! Be the first to rate this post.

As you found this post useful...

Follow us on social media!

About The Author

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top
Skip to content