Autor | Zpráva | ||
---|---|---|---|
okurka Profil * |
#1 · Zasláno: 25. 6. 2022, 14:57:01
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 |
||
Časová prodleva: 2 roky
|
0