Zafixování horní lišty s menu na WordPressu

Prozkoumat kód Webové stránky

Máte krásný web na WordPressu, vybrali jste si krásnou šablonu, ale zjistili jste že při skrolování vám menu zůstane vždy nahoře (tedy zmizí z dohledu)? U delších stránek to může být pro návštěvníka dost frustrující. Řešením je zafixování horní lištky, kde se menu nachází. Nemusíte pro to hledat novou šablonu, ale stačí pár řádek kódu.

Zjištění správné značky

Nejprve je třeba zjisit jakému tagu (značce) v html kódu stránky přidáme styl, který zajistí, že se menu bude posouvat s námi. Návod píšu pro Mozilla Firefox, případně Google Chrome, kde je postup takřka stejný. Pravým tlačítkem myši kliknu na sekci ve které je naše menu a zvolím Prozkoumat prvek (v Chromu Prozkoumat).

Prozkoumat kód
Prozkoumat prvek

V dolní půlce obrazovky se vám zobrazí zdrojový kód stránky. Jak po něm budete přejíždět myší, budou se vám zvýrazňovat sekce na stránce za které kód zodpovídá. Když to vezmu jednodušše, potřebujeme aby se nám zvýraznilo naše menu.

Hledání té správné značky
Hledání té správné značky

V tomto případě se menu vykresluje ve značce div, která má id=“header_main“. Můžeme si hned kód vyzkoušet v Editoru stylů, který nám Firefox nabízí. Přepneme se a vepíšeme (kamkoliv) následující kód (v každé šabloně bude asi potřeba trošku jiný, ale princip je stejný)
#header_main{
position: fixed;
background-color: white;
width: 100%;
padding: 5px;
}

Důležitá je sekce position: fixed, která nám fixuje menu, tak aby „jezdilo“ s námi po obrazovce. Další řádky asi (ne)budete potřebovat v závislosti na šabloně. background-color:white se mi stará o to aby menu bylo podbarvené bíle. Pokud bych to tam nedal bude mezi logem a tlačítky průhledná část. width:100% roztahuje menu na celou šířku obrazovky. padding mi přidává malý vnitřní okraj aby tlačítka s odkazy měla pod sebou trochu bílého prostoru.

Zapsání kódu, responzivita

Pokud kód funguje, můžeme ho trvale zapsat. Každá šablona nabízí nějaké přizpůsobení CSS stylů (Vzhled – Upravit CSS), případně můžeme kód zapsat i přímo do nějakého css souboru a nahrát na server pomocí FTP klienta. Menu by se nám teď mělo pohybovat po obrazovce. Na desktopu to bude asi v pořádku, ale v mobilní verzi toto nebývá zvykem (chceme co největší část obrazovky pro obsah). Náš styl tedy můžeme adresovat pouze pro větší obrazovky. Upravíme např. takto:
@media only screen and (min-width: 768px) {
#header_main{
position: fixed;
background-color: white;
width: 100%;
padding: 5px;
}
}

Styl tedy platí pro obrazovky 768px a větší. Pro menší budou platit původní pravidla.

Pokud byste potřebovali pomoci s tvorbou nebo s dotažením vašeho webu nejen na WordPressu, můžete mě kontaktovat.

hilgertl
Celý svůj život jsem hlavně sportovec a přestože mám na svém kontě už mnoho porážek, nevypadá to, že by mě od sportu něco odradilo. Také mě baví moderní technologie a na škole jsem přičichl k programování. Baví mě hledat jednoduchá řešení a pomocí správně poskládaného kódu usnadňovat práci a tvořit něco co funguje a používá se to. Mimo to si vařím svoje pivo, peču svůj chleba a semtam zahradničím:)

Napsat komentář

Vaše emailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *