> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.pandectes.io/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# How to fix the banner hiding behind theme elements (New Version)

### Overview

The banner renders as the `pandectes-cmp` web component. Theme CSS does not style it the same way as the Legacy `#pandectes-banner` element.

Sticky headers, announcement bars, chat buttons, and some apps use a very high **z-index**. If they sit above the banner, visitors cannot click Accept or Decline.

On the New Banner, raise stacking order under **Settings > Banner > Style** (surfaces / z-index). The maximum value is `2147483647`.

||| **New Banner.** For stores with the **New version** badge on **Settings > Banner**. On the Legacy Banner, see [How to switch to the new banner or switch back to the previous version](/en/article/how-to-switch-to-the-new-banner-or-switch-back-to-the-previous-version-x1xdn9/).

### Before you start

* Confirm the banner is enabled (or enabled for admins) and that **Pandectes Core** is on in the theme.
* Reproduce on the storefront, not only in the in-app preview, because preview chrome is different from the live theme.

### Raise z-index in Style

1. Open **Shopify Admin > Apps > Pandectes GDPR Compliance**.
2. Go to **Settings > Banner > Style**.
3. Find surfaces / **z-index**.
4. Enter a value higher than the overlapping element (often `999999` or the maximum `2147483647`).
5. Save.
6. Refresh the storefront (hard refresh) and try Accept / Decline again.

![Surfaces controls including stacking depth (z-index)](https://images.pandect.es/knowledge-base/how-to-fix-the-banner-hiding-behind-theme-elements-new-version-2.png =900xauto)

### If Style is not enough

Add a rule under **Style > Custom styling**. Scope it to the web component. See [Custom styling with CSS](/en/article/custom-styling-with-css-52oqz4/).

Example:

```css
pandectes-cmp {
  z-index: 2147483647;
}
```

### Other checks

* On mobile, a bottom **Bar** can sit under a sticky add-to-cart bar. Change mobile position or use a mobile override. See [How to use different banner layouts on mobile and desktop (New Version)](/en/article/how-to-use-different-banner-layouts-on-mobile-and-desktop-new-version-c1vwrd/).
* Chat widgets often use a high z-index. Move the **consent widget** to the opposite corner. See [How to enable and customize the Consent widget (New Version)](/en/article/how-to-enable-and-customize-the-consent-widget-new-version-nlm8ve/).
* If buttons do not respond at all on iPhone, a theme script may be capturing taps. See [The banner or the application, in general, is not working, what can I do?](/en/article/the-banner-or-the-application-in-general-is-not-working-what-can-i-do-bxrs4y/).

### Related articles

* [How to customize banner style, colors, logos, and buttons (New Version)](/en/article/how-to-customize-banner-style-colors-logos-and-buttons-new-version-b1mh64/)
* [My banner is not showing up: Troubleshooting](/en/article/my-banner-is-not-showing-up-troubleshooting-1kcv5ko/)