> ## 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).

# De banner die achter thema-elementen verdwijnt oplossen (nieuwe versie)

### Overzicht

De banner wordt weergegeven als de webcomponent `pandectes-cmp`. Thema-CSS stijlt deze niet op dezelfde manier als het Legacy-element `#pandectes-banner`.

Sticky headers, mededelingenbalken, chatknoppen en sommige apps gebruiken een zeer hoge **z-index**. Als ze boven de banner staan, kunnen bezoekers niet op Accept of Decline klikken.

Verhoog bij de nieuwe banner de stapelvolgorde onder **Cookie banner > Style** (surfaces / z-index). De maximale waarde is `2147483647`.

||| **Nieuwe banner.** Voor winkels met het label **New version** bij **Cookie banner**. Voor de Legacy-banner, zie [How to switch to the new banner or switch back to the previous version](/nl/article/overstappen-naar-de-nieuwe-banner-of-terug-naar-de-vorige-versie-1l5zakw/).

### Voordat je begint

* Controleer of de banner is ingeschakeld (of ingeschakeld voor admins) en of **Pandectes Core** aan staat in het thema.
* Reproduceer het probleem op de webshop, niet alleen in de voorvertoning in de app, want de voorvertoning ziet er anders uit dan het live thema.

### De z-index verhogen in Style

1. Open **Shopify Admin > Apps > Pandectes GDPR Compliance**.
2. Ga naar **Cookie banner > Style**.
3. Zoek surfaces / **z-index**.
4. Voer een waarde in die hoger is dan het overlappende element (vaak `999999` of het maximum `2147483647`).
5. Klik op Save.
6. Ververs de webshop (harde verversing) en probeer Accept / Decline opnieuw.

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

### Als Style niet genoeg is

Voeg een regel toe onder **Style > Custom styling**. Beperk deze tot de webcomponent. Zie [Custom styling with CSS](/nl/article/aangepaste-styling-met-css-xah8nh/).

Voorbeeld:

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

### Andere controles

* Op mobiel kan een **Bar** onderaan onder een sticky add-to-cart-balk komen te liggen. Wijzig de mobiele positie of gebruik een mobiele afwijking. Zie [How to use different banner layouts on mobile and desktop (New Version)](/nl/article/verschillende-bannerlay-outs-gebruiken-op-mobiel-en-desktop-nieuwe-versie-17g51h9/).
* Chatwidgets gebruiken vaak een hoge z-index. Verplaats de **consent widget** naar de tegenoverliggende hoek. Zie [How to enable and customize the Consent widget (New Version)](/nl/article/de-toestemmingswidget-inschakelen-en-aanpassen-nieuwe-versie-kpjd4x/).
* Als knoppen op iPhone helemaal niet reageren, onderschept mogelijk een thema-script de tikken. Zie [The banner or the application, in general, is not working, what can I do?](/nl/article/de-banner-of-de-applicatie-werkt-in-het-algemeen-niet-wat-kan-ik-doen-181kuo4/).

### Gerelateerde artikelen

* [How to customize banner style, colors, logos, and buttons (New Version)](/nl/article/stijl-kleuren-logos-en-knoppen-van-de-banner-aanpassen-nieuwe-versie-1ptmcl/)
* [My banner is not showing up: Troubleshooting](/nl/article/mijn-banner-wordt-niet-weergegeven-probleemoplossing-cl4ths/)