# A sáv fejléce és gombjai mobilon

> A sáv címe mobilon, a logó, a cím és a bezáró gomb elrendezése, és a gombok egymás alá rakása.

## A fejléc elemei és a cím mobilon

A sáv fejlécében három elem lehet: **logó**, **cím** és **bezáró gomb**. Mobilon (425 képpont vagy keskenyebb képernyőn) a Complianz alapból elrejti a címet. Ennek az az oka, hogy ha logó és bezáró gomb is be van kapcsolva, a cím a legszélesebb elem, ezért ez megy ki a helyből. A cím elrejtése akkor is érvényes, ha nincs bekapcsolva logó vagy bezáró gomb.

A cím a `.cmplz-cookiebanner .cmplz-title` elem, a logó a `.cmplz-logo`, a bezáró gomb a `.cmplz-close`, a három együtt a `.cmplz-header` blokkban van. Ha nincs logód és bezáró gombod, a címet egyéni CSS-sel visszahozhatod mobilra: a `.cmplz-cookiebanner .cmplz-header .cmplz-title` elemnek kell a mobilos `display: none` helyett látszania. A CSS-t a **Complianz → Consent Banner → Custom CSS** fülre írd.

## Három elrendezés mobilra

A fejléc elemeit háromféleképpen rendezheted át, attól függően, mit szeretnél látni:

1. **Cím és bezáró gomb.** A cím visszakerül, balra igazítva, a bezáró gombbal együtt. A logó nem marad meg.
2. **Cím és logó.** Nincs bezáró gomb, de a logó és a cím látszik.
3. **Csak cím.** A cím középre kerül, a logó és a bezáró gomb rejtve van.

Mindhárom változat egyéni CSS-sel készül, a fejléc rácsos (grid) elrendezésének átállításával; az elemek elrejtéséhez vagy mozgatásához a fent felsorolt osztályokat használd.

## Gombok egymás alatt

A 6.0-s kiadásban a Complianz megszüntette a gombok sorrendi kiemelését, mert a joggyakorlat és az adatvédelmi irányelvek szerint a látogatót nem szabad egy bizonyos választásra terelni. A korábbi sáv az elfogadó gombot a többi fölé tette; az új sávban a gombok egy sorban, egyforma súllyal vannak.

Ha mégis egymás alatt szeretnéd őket, egyéni CSS-sel kell a gombok konténerét (`.cmplz-buttons`) átállítani úgy, hogy ne sorban jelenjenek meg. Egy működő példa a [Kedvenc sáv újraalkotása CSS-sel](https://hub.hellowp.io/hu/plugins/complianz-gdpr-premium/stilus-css-sav-masolasa/) fejezetben van: ott a `.cmplz-cookiebanner .cmplz-buttons` szabály `display: unset !important` értéke teszi egymás alá a gombokat, a szélesség pedig külön szabály.

Ügyelj arra, hogy a gombok egymás alatt is egyenrangúan látsszanak (azonos méret és szín), különben a sáv terelő megjelenésűnek számíthat. Erről a [Testosztályok régió és hozzájárulás szerint, a TCF-sáv testreszabása](https://hub.hellowp.io/hu/plugins/complianz-gdpr-premium/stilus-css-testosztalyok-tcf/) fejezet is szól.

## Gombok egy sorban mobilon

Az alapsáv mobilos nézetében a gombok egymás alatt állnak, ezért a sáv magas. Ha alacsonyabb sávot szeretnél, a gombok konténerének irányát oszlopról (függőleges) sorra (vízszintes) kell váltani. Ez a padding csökkentésén túli, másik módszer a sáv mobilos méretének mérséklésére.

Illeszd be az alábbi szabályt a **Complianz → Consent Banner → Custom CSS** fülre:

```css
/* Egymás alatti gombok helyett egy sorban */
@media (max-width: 768px) {
  .cmplz-cookiebanner .cmplz-buttons {
    flex-direction: row !important;
  }
}
```

A szabály csak a 768 képpontnál keskenyebb képernyőkön érvényes, az asztali nézetet nem változtatja meg. A gombok ilyenkor egymás mellé kerülnek, így a sáv kevesebb helyet foglal el a telefon képernyőjén.