Back to Community
Home / Community / General

Fixing the Cookie Popup Z-Index Conflict: Why Your Settings Modal Appears Behind the Header

15 threads Sep 16, 2025

Content

A common issue users encounter with the 'GDPR Cookie Compliance' plugin is the cookie settings modal (popup) appearing behind the site's header or menu. This visual glitch makes the modal difficult to interact with and creates a poor user experience. Based on community reports, this is a frequent problem, particularly with themes that use fixed or sticky headers.

Why This Happens

The issue is a z-index conflict. In web design, the z-index CSS property controls the stacking order of elements on a page. Elements with a higher z-index value appear in front of those with a lower value. Many modern WordPress themes assign a high z-index to their headers and menus to ensure they remain on top of all other content. If the plugin's modal has a lower z-index, the header will visually obscure it.

Most Common Solutions

The following solutions, gathered from successful community resolutions, involve adding small snippets of code to increase the z-index of the modal or conditionally adjust the header's z-index.

Solution 1: Increase the Modal's Z-Index (Universal Fix)

This is the most widely recommended fix. It significantly increases the z-index of the settings modal to ensure it appears above nearly all other site elements.

add_action('moove_gdpr_inline_styles','moove_extend_gdpr_styles',10,3);
function moove_extend_gdpr_styles( $styles, $primary, $secondary ) {
  $styles .= '.lity { z-index: 99999999 !important; }';
  return $styles;
}

How to apply this: Add this code to your child theme's functions.php file. If you are not using a child theme, consider using a code snippets plugin to safely add custom PHP.

Solution 2: Conditionally Adjust the Header's Z-Index (Theme-Specific Fix)

For some themes, particularly Avada or Salient, simply increasing the modal's z-index is not enough. In these cases, you may need to lower the header's z-index only when the cookie modal is visible. This approach is often more reliable for complex themes.

add_action('moove_gdpr_inline_styles','gdpr_cookie_css_extension',10,3);
function gdpr_cookie_css_extension( $styles, $primary, $secondary ) {
  $styles .= 'body.gdpr-infobar-visible #main-header { z-index: 99; }';
  $styles .= 'body.gdpr-infobar-visible #top-header { z-index: 100; }';
  $styles .= '.lity { z-index: 99999999; }';
  return $styles;
}

Note: You will need to replace the CSS selectors (#main-header, #top-header) with those used by your specific theme. Use your browser's inspector tool to identify the correct classes or IDs for your header.

Solution 3: Add CSS via Theme Customizer (Non-Code Alternative)

If you are uncomfortable editing PHP files, you can often achieve the same result by adding pure CSS through your theme's customizer or a custom CSS plugin. The following rule can be added to the "Additional CSS" section in the WordPress Customizer.

.lity {
    z-index: 99999999 !important;
}

Important Considerations

  • Cache: After implementing any of these changes, clear your website's cache (both any caching plugins and your browser cache) to see the results immediately.
  • Child Theme: Always use a child theme when modifying theme files like functions.php to prevent your changes from being overwritten during theme updates.
  • Plugin Updates: The 'GDPR Cookie Compliance' team has been known to address common issues like this in updates. Always ensure your plugin is updated to the latest version before troubleshooting, as your problem may have already been resolved.

If these solutions do not resolve the issue, the problem could be a more complex JavaScript conflict with your theme or other plugins. Isolating the conflict by temporarily switching to a default WordPress theme (like Twenty Twenty-One) and disabling other plugins can help identify the cause.

Related Support Threads Support