# Navigációs menü: ragadós fejléc, zsugorodó fejléc és elrejtés görgetéskor

> A Navigációs menü widget Rögzített menü kapcsolója: ragadós fejléc, felfelé görgetéskor megjelenő fejléc, a rögzített állapot stílusa, színváltás, átlátszó és üveghatású fejléc, zsugorodó fejléc.

A ragadós menü görgetés közben is a képernyő tetején marad, így a főbb linkek, a keresés és a gombok mindig elérhetők. A [Navigációs menü](https://hub.hellowp.io/hu/plugins/theplus_elementor_addon/karuszell-navigacio-navigacio-menu-attekintes/) widgetben egyetlen kapcsolóval bekapcsolod, kód nélkül. A funkció Pro: az ingyenes Navigation Menu Lite widgetben nincsenek rögzítési beállítások.

## Mi kell hozzá

- A **Navigation Menu** widget bekapcsolva a **The Plus Addons → Widgets** oldalon.
- Egy fejlécsablon, amelybe a widgetet teszed, hogy a menü minden oldalon megjelenjen.
- Egy WordPress-menü a **Megjelenés → Menük** alatt, ha az **Alapértelmezett** menütípust használod.

## Ragadós menü bekapcsolása

1. Tedd a **Navigációs menü** widgetet a fejlécsablonba, ugyanabba a tárolóba, ahol a logó és a gombok vannak. Válaszd ki a **Menütípust**, a **Menü irányát** és a menüt.
2. A **Tartalom → Extra opciók** szakaszban kapcsold be a **Rögzített menü** beállítást.

![A Navigációs menü Extra opciók szakasza a Rögzített menü és a Rögzített menü felfelé görgetéskor kapcsolóval](./kepek/karuszell-navigacio-5-panel-menu-extra.webp)

*A Navigációs menü Extra opciók szakasza a Rögzített menü és a Rögzített menü felfelé görgetéskor kapcsolóval* (https://minta-bolt.hu/wp-admin/post.php?post=38&action=elementor)

A képen a **Rögzített menü** be van kapcsolva, alatta a **Rögzített menü felfelé görgetéskor** kapcsoló látszik.

3. Tedd közzé az oldalt, és görgess. A fejléc a tetején marad.

![A ragadós fejléc a lap tetején marad görgetés után is](./kepek/karuszell-navigacio-5-menu-ragados.webp)

*A ragadós fejléc a lap tetején marad görgetés után is* (https://minta-bolt.hu/tp-kn5-ragados/)

A képen az oldal már legörgetve áll, a menüsor mégis a tetején látszik.

Mit rögzít a kapcsoló és mikor:

- A **Rögzített menü** a widgetet tartalmazó tárolót (vagy régi szakaszt) rögzíti, nem csak magát a widgetet. A tároló minden eleme vele ragad, ezért a logót és a gombokat is ugyanabba a tárolóba tedd.
- Régi szakaszoknál a külső szakasz ragad, akkor is, ha a widget belső szakaszban van. Tárolóknál a legközelebbi tároló ragad: ha a widget egy másik tárolóban lévő tárolóban áll, csak a belső ragad.
- A fejléc akkor kezd ragadni, amint az oldal túlgörög a tároló tetején. Az oldal tetején álló fejlécnél ez az első görgetés.
- Az eredeti helyén ugyanolyan magas helyfoglaló marad, így az alatta lévő tartalom nem ugrik.

## Megjelenítés csak felfelé görgetéskor

1. Kapcsold be a **Rögzített menü felfelé görgetéskor** beállítást közvetlenül a **Rögzített menü** alatt. A beállítás csak bekapcsolt **Rögzített menü** esetén látszik.
2. Adj a fejlécnek hátteret: a **Stílus → Rögzített főmenü → Szakasz háttérbeállításai** alatt, vagy a tárolón. Háttér nélkül az oldal átlátszik, miközben a fejléc csúszik.
3. Tedd közzé az oldalt, és görgess.

![A fejléc eltűnt, miközben az oldalon lefelé görgetünk](./kepek/karuszell-navigacio-5-menu-elrejtve.webp)

*A fejléc eltűnt, miközben az oldalon lefelé görgetünk* (https://minta-bolt.hu/tp-kn5-elrejt/)

A képen az oldal legörgetve áll, és a fejléc nincs a képernyőn: lefelé görgetéskor elbújik, felfelé görgetéskor visszacsúszik.

- Pár képpontnyi görgetést figyelmen kívül hagy, így apró mozdulatoknál nem villog a fejléc.
- A **Rögzített menü** ennél is a tárolót rögzíti, tehát a logó és a gombok is vele mozognak.

**A fejléc ugrál vagy félúton megáll.** Egyedi CSS vagy másik bővítmény is mozgatja a fejlécet (pozíció, transzformáció vagy saját ragadós beállítás). Távolítsd el, és kapcsold ki az Elementor saját Ragadós/Mozgáshatások beállítását ugyanezen a tárolón.

**Más elemek a fejléc fölött görögnek.** Emeld meg a fejléctároló Z-indexét a **Haladó** fülön.

## A rögzített fejléc stílusa

A **Rögzített menü** bekapcsolása két szakaszt ad a **Stílus** fülhöz. Beállításaik csak akkor érvényesek, amikor a fejléc rögzített.

![A Stílus fül Rögzített főmenü szakasza: padding, színek, háttér és magasság beállításai](./kepek/karuszell-navigacio-5-panel-menu-ragados-stilus.webp)

*A Stílus fül Rögzített főmenü szakasza: padding, színek, háttér és magasság beállításai* (https://minta-bolt.hu/wp-admin/post.php?post=38&action=elementor)

A képen a **Rögzített főmenü** szakasz látszik: a **Külső padding**, a **Belső padding**, a **Tipográfia**, a színek, a **Szakasz háttérbeállításai** és a **Rögzített padding**.

| Szakasz | Beállítások |
| --- | --- |
| **Rögzített főmenü** | **Külső padding** és **Belső padding**, jelző és **Normál** / **Rámutatás** / **Aktív** színek; **Szakasz háttérbeállításai** **Normál** és **Tapadó** fülön, mindkettőn **Háttérszűrő**; **Rögzített padding**; **Rögzített szélesség**, **Felül**, **Konténer igazítása**, **Keretsugár** és **Dobozárnyék** |
| **Rögzített mobilmenü** | A mobilmenü színei és a **Túlcsordulás görgetése** |

A **Túlcsordulás görgetése** hosszú mobilmenünél segít: a rögzített fejléc is görgethető lesz a **Mobilmenü megnyitása** szélességén és keskenyebben.

**A rögzített szín sosem jelenik meg.** Ha a fejléctárolónak saját háttere van (tároló → **Stílus** → háttér), az felülírja a widget **Tapadó** fülét. Töröld, és a normál színt a **Stílus → Rögzített főmenü → Szakasz háttérbeállításai → Normál** alatt add meg.

**Egy hosszú mobilmenü nem görgethető.** Kapcsold be a **Stílus → Rögzített mobilmenü → Túlcsordulás görgetése** beállítást.

## Fejléc háttere: színváltás, átlátszóság és üveghatás

A rögzített fejléc háttere a **Stílus → Rögzített főmenü → Szakasz háttérbeállításai** szakaszban állítható. Két fül van: a **Normál** a fejlécet mutatja, amíg az oldal tetején áll, a **Tapadó** pedig azt, amikor már ragad. Mindhárom hatás ugyanebből a két fülből jön létre, kód nélkül.

![A Rögzített főmenü szakasz Szakasz háttérbeállításai része a Normál és Tapadó fülekkel](./kepek/karuszell-navigacio-6-panel-ragados-hatter.webp)

*A Rögzített főmenü szakasz Szakasz háttérbeállításai része a Normál és Tapadó fülekkel* (https://minta-bolt.hu/wp-admin/post.php?post=62&action=elementor)

A képen a **Normál** és **Tapadó** fül, alattuk a **Háttér típusa**, a **Szín**, a **Kép** és a **Háttérszűrő** látszik.

Közös előfeltételek mindhárom hatáshoz:

- A **Tartalom → Extra opciók** szakaszban be van kapcsolva a **Rögzített menü**.
- A fejléctárolónak nincs saját háttere. Ha a tároló **Stílus** fülén van háttér, az mindig felülírja a widget **Tapadó** fülét, és a rögzített szín soha nem jelenik meg. Töröld a tároló hátterét, és a fejléc normál színét a widgetben, a **Normál** fülön add meg.
- A szerkesztő nem úgy görgeti az oldalt, mint egy látogató, ezért a hatásokat a közzétett oldalon nézd meg.
- A hatások csak a Pro Navigációs menü widgetben vannak meg, az ingyenes Lite widgetben nincsenek rögzítési beállítások.

### Szín váltása görgetéskor

A fejléc az oldal tetején egy színű, ragadás után másik színű lesz. Így olvasható marad minden szakasz fölött.

1. Kapcsold be a **Rögzített menü** beállítást, és vedd le a tároló saját hátterét.
2. A **Szakasz háttérbeállításai** alatt a **Normál** fülön állítsd a **Háttér típusa** értékét **Klasszikus**ra, és válaszd ki a fejléc színét.
3. Nyisd meg a **Tapadó** fület, állítsd a **Háttér típusa** értékét **Klasszikus**ra (vagy **Színátmenet**re), és válassz egy másik színt.
4. Ha a szöveg az új háttéren nehezen olvasható, a **Rögzített főmenü** szakasz felső részén a **Normál**, **Rámutatás** és **Aktív** fül színeit módosítsd. Ezek akkor érvényesek, amikor a fejléc rögzített, a **Főmenü** szakasz színei pedig addig, amíg még nem ragad.
5. Tedd közzé az oldalt, és görgess.

![Sötét hátterű, fehér szövegű fejléc görgetés után](./kepek/karuszell-navigacio-6-ragados-szin.webp)

*Sötét hátterű, fehér szövegű fejléc görgetés után* (https://minta-bolt.hu/tp-kn6-szin/)

A képen az oldal legörgetve áll: a fejléc sötétkék lett, a menüpontok pedig fehérek.

Korlátok: a logó nem cserélődik magától, a cseréjét a [Webhely logója](https://hub.hellowp.io/hu/plugins/theplus_elementor_addon/karuszell-navigacio-webhely-logo/) fejezet írja le. Ha a háttér változik, de a szöveg nem, a színeket a **Rögzített főmenü** szakasz **Normál** / **Rámutatás** / **Aktív** fülén állítsd, ne a **Főmenü** szakaszban.

### Átlátszó ragadós fejléc

Az átlátszó fejléc a tetején marad, a tartalom pedig halványan átlátszik rajta. Képes oldalakhoz illik.

1. Kapcsold be a **Rögzített menü** beállítást, és vedd le a tároló saját hátterét.
2. A **Normál** fülön add meg a fejléc normál színét.
3. A **Tapadó** fülön állítsd a **Háttér típusa** értékét **Klasszikus**ra, és válassz színt.
4. A színválasztóban csökkentsd az átlátszatlanságot, például 50 és 70 százalék közé. Minél alacsonyabb, annál több látszik át az oldalból.
5. Állítsd be olvasható szövegszínt a **Rögzített főmenü** szakasz **Normál**, **Rámutatás** és **Aktív** fülén.
6. Tedd közzé az oldalt, és görgess.

![Átlátszó ragadós fejléc, amelyen át látszik a mögötte görgő szöveg](./kepek/karuszell-navigacio-6-ragados-atlatszo.webp)

*Átlátszó ragadós fejléc, amelyen át látszik a mögötte görgő szöveg* (https://minta-bolt.hu/tp-kn6-atlatszo/)

A képen a fejléc félig átlátszó, a mögötte elhaladó szöveg átüt rajta.

- Ha a színt a **Normál** fülön állítod át, a fejléc már ragadás előtt átlátszó lesz. Az átlátszó színt a **Tapadó** fülre tedd.
- Zsúfolt tartalom fölött a menüszöveg nehezen olvasható. Ilyenkor adj hozzá elmosást, lásd a következő részt.

### Üveghatású ragadós fejléc

Az üveghatású fejléc a mögötte görgő tartalmat elmossa, mint a matt üveg. Két beállítás kell hozzá: átlátszó szín és elmosás.

1. Állítsd be az átlátszó színt a **Tapadó** fülön, ahogy az előző részben: **Klasszikus** háttér, a szín átlátszatlansága kb. 50 és 60 százalék között.
2. Ugyanezen a fülön kattints a **Háttérszűrő** melletti ceruzára.
3. Az **Elmosás** értékét állítsd 8 és 12 képpont közé: ez adja a jól látható üveghatást. Az alatta lévő **Szürkeárnyalatos** a fejléc alatt átlátszó színeket színtelenné teszi.
4. Tedd közzé az oldalt, és görgess.

![Üveghatású ragadós fejléc: a mögötte lévő szöveg elmosódott](./kepek/karuszell-navigacio-6-ragados-uveg.webp)

*Üveghatású ragadós fejléc: a mögötte lévő szöveg elmosódott* (https://minta-bolt.hu/tp-kn6-uveg/)

A képen a fejléc fölső sávjában a mögötte elhaladó szöveg már elmosódott, nem olvasható.

- Az elmosás csak átlátszó színnel látszik. Teljesen átlátszatlan színnel nem látod a hatást.
- Az elmosás csak mozgalmas tartalom fölött látványos, sima háttéren olyan, mint egy átlátszó fejléc.
- Az elmosást és az átlátszó színt a **Tapadó** fülön állítsd, mert a **Normál** fülön a fejléc már ragadás előtt üveges lenne.

**Nincs elmosás.** Nézd meg, hogy az **Elmosás** értéke nagyobb-e nullánál, a szín átlátszatlansága kisebb-e 100 százaléknál, és hogy mindkettő a **Tapadó** fülön van-e.

**A fejléc tömör marad.** A tároló saját háttere (tároló → **Stílus** → háttér) felülírja a widget **Tapadó** fülét. Töröld, és a normál színt a **Normál** fülön add meg.

## Zsugorodó fejléc

A zsugorodó fejléc görgetéskor alacsonyabb lesz, így olvasás közben kevesebb helyet foglal, a menü mégis kéznél marad. A hatást úgy éred el, hogy a rögzített fejlécnek kisebb a paddingje, mint a normálnak.

Rögzített állapotban a widget a **Stílus → Rögzített főmenü** beállításait használja a normálak helyett. Kettő szabályozza a magasságot:

| Beállítás | Mit paddingol |
| --- | --- |
| **Belső padding** | Minden főmenü-linket |
| **Rögzített padding** | A teljes fejléctárolót |

1. Építsd meg a fejlécet a **Navigációs menü** widgettel, a logóval és a gombokkal azonos tárolóban.
2. A **Tartalom → Extra opciók** szakaszban kapcsold be a **Rögzített menü** beállítást.
3. A **Stílus → Rögzített főmenü** szakaszban a **Belső padding** felső és alsó értéke legyen kisebb, mint a **Stílus → Főmenü → Belső padding** értéke.
4. Nagyobb változáshoz állítsd a **Rögzített padding** értékét (lejjebb, a **Szakasz háttérbeállításai** alatt) a tároló saját paddingjénél kisebbre.
5. Adj a fejlécnek hátteret, hogy az oldal ne látsszon át, miközben zsugorodik.
6. Tedd közzé az oldalt, és görgess: a fejléc rövidebb lesz, ahogy rögzül.

Korlátok:

- Egy nagy logó magasan tartja a fejlécet. A padding csak az elemek körüli helyet csökkenti. Kisebb logóhoz rögzített állapotban lásd a [Webhely logója](https://hub.hellowp.io/hu/plugins/theplus_elementor_addon/karuszell-navigacio-webhely-logo/) fejezet ragadós logóját.
- A szerkesztő nem görgeti az oldalt úgy, mint egy látogató. A ragadós hatásokat a közzétett oldalon nézd meg.

**A fejléc nem zsugorodik.** Nézd meg, hogy a **Rögzített menü** be van-e kapcsolva az éles fejlécsablonban lévő widgeten, és hogy a rögzített **Belső padding** tényleg kisebb-e a **Főmenü** értékénél.

**A fejléc ugrál vagy villog, amikor visszagörgetek a tetejére.** Kapcsold ki az ugyanazon a tárolón lévő más görgetési hatásokat (Elementor Mozgáshatások, másik ragadós beállítás), és próbáld újra.