BugWP logo BugWP
Back to Community
Home / Community / Plugin → Cookie notice & compliance for gdpr / ccpa

How to Fix Cookie Notice Overlap Issues with Your Website Header

23 threads Sep 7, 2025 Plugin → Cookie notice & compliance for gdpr / ccpa

Content

A common issue reported by users of the 'Cookie Notice & Compliance for GDPR / CCPA' plugin is that the consent banner overlaps or covers the website's header, logo, or navigation menu. This is particularly prevalent when the notice is set to appear at the top of the page and the site uses a fixed or sticky header that remains visible while scrolling.

Why This Happens

The overlap occurs due to how elements are layered on a web page, which is controlled by the CSS z-index property and the position attribute. The cookie notice uses position: fixed; to remain in view, and a high z-index value (like 9999) to ensure it sits above other content. If your header also has a high z-index, the two elements compete for the top layer, often resulting in an unwanted overlap.

Most Common Solutions

Based on community discussions and solutions provided by the 'Cookie Notice & Compliance for GDPR / CCPA' team, here are the most effective ways to resolve this conflict.

Solution 1: Adjust the Z-Index of Your Header

The most frequently recommended fix is to lower the z-index value of your website's header so it sits behind the cookie notice.

  1. Identify the CSS class or ID for your header. Common selectors include #header, .site-header, or .main-navigation. You may need to use your browser's inspect tool to find the correct one.
  2. Add the following CSS code to your theme's Additional CSS section (under Appearance > Customize) or your child theme's stylesheet: 
    #header {
    z-index: 100;
}
    Replace #header with the correct selector for your theme. The goal is to assign a value lower than the notice's z-index of 9999.

Solution 2: Move the Notice to the Bottom

If adjusting the z-index proves difficult or causes other layout issues, a simpler and often more effective solution is to change the notice's position to the bottom of the screen. This is the plugin's default behavior and is less likely to conflict with fixed headers.

  1. In your WordPress dashboard, navigate to Cookie Notice > Settings.
  2. In the Position dropdown, select Bottom.
  3. Save your changes.

Solution 3: Check for Plugin or Minification Conflicts

In some cases, the issue is not with the z-index but with the CSS position: fixed; property not being applied correctly. This can happen if another plugin is optimizing or minifying CSS.

As seen in one thread, a user resolved their 'top position doesn't work' issue by disabling the 'Minify And Combine' option in the Clearfy plugin for the plugin's CSS files (front.min.css, front.css). If you use a caching or optimization plugin, try excluding these files or temporarily disabling the plugin to see if it resolves the overlap.

Advanced: Using a Body Class for Padding (For Developers)

Some users have requested a feature where the page content is pushed down when the top notice is visible. While this is not a native plugin feature, a developer can use the following code snippet to add a class to the body when the notice is active, allowing for custom styling like adding top padding.

function cn_body_class( $classes ) {
    if ( function_exists( 'cn_cookies_accepted' ) && ! cn_cookies_accepted() ) {
        $classes[] = 'cookie-notice-visible';
    }
    return $classes;
}
add_filter( 'body_class', 'cn_body_class' );

You can then add CSS to push your content down:

body.cookie-notice-visible {
    padding-top: 60px; /* Adjust this value to match the height of your cookie notice */
}

By understanding the cause of the overlap and applying one of these solutions, you can ensure your cookie notice and website header coexist harmoniously.

Related Support Threads Support