Webové zákusky

Dlouhé sticky menu na mobilu

9. 5. 2022

Při použití sticky menu (menu, které při scrolování stránky zůstane nalepené nahoře a je tedy vždy viditelné) se někdy může stát, že menu zakryje celý obsah webu, pokud je hodně košaté.
Bohužel – DIVI nemá v základu pro tuto situaci řešení.
Bohudík – řešení je na pár řádků CSS.

Na obrázku je vidět, jak menu zakrylo celý text webu. Největší problém ale je, že se nejde posunout na stránce dolů, protože je menu přilepené na stránce a není vidět žádná plocha, která by se dala posouvat.

Sticky menu problem

V podstatě stačí vložit do globálního CSS (Appearance -> Customize -> CSS) následujících pár řádek:

.et_mobile_menu {   
    overflow-y: scroll !important; /* limit the menu area and show the scroll sidebar */
    max-height: 80vh !important; /* set height of the menu to see rest of the page */
    -overflow-scrolling: touch !important;
    -webkit-overflow-scrolling: touch! important;
}

A to je celé, víc není potřeba. Menu si můžete udělat jakkoli vysoké tím, že upravíte jeho výšku.

Sticky menu řešení

Ideálnější řešení by bylo udělat položky menu rozbalovací, ale to tom někdy jindy.

Zdroje

Další články

Jak přidat fonty do DIVI

V článku o lokálních fontech v DIVI jsem popisovala, jak je možné přidat do DIVI vlastní font a co dělat, pokud DIVI daný formát fontu nepodporuje (tedy jiný formát než TFF nebo OTF). Někdy je...