Autor Zpráva
okurka
Profil *
Dobrý den,

pokouším se vytvořit webovou stránku, ale pořád narážím na nějaký zřejmě jednoduchý problém, který nedokážu překonat. V horní části stránky má být logo s animovanou velikostí a tato stránka má mít výšku 100vh - 80 px, těch 80 px vyplní navigační lišta s menu, která bude dole. Při scrollování se lišta přesune nahoru a po zbytek webu bude nahoře (řeším přes position: sticky;). V desktopové verzi funguje vše správně, ale narážím na problém ve verzi pro mobily, kde bude hamburger menu.

Lišta má i ve verzi pro mobily 80 px na výšku, po kliknutí na hamburger ikonu chci vyplnit zbytek stránky, takže rozrolované menu bude mít opět výšku 80px (horní lišta) a fullscreen s odkazy (100vh - 80px). Kliknutí na hamburger by mělo v .main-menu ul přes javascript přidat/odebrat display: none;, aby vždy byla vidět horní lišta 80px, ale zobrazoval se / mizel překryv s odkazy. Když v tuto chvíli manuálně napíšu do css display: none;, z nějakého důvodu se mi posune začátek stránky a úvodní fullscreen s logem je zčásti překrytý následujícím obsahem.

Mohl bych někoho poprosit o nakopnutí, co dělám špatně?

Živá ukázka

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm:

0