Logo webu je, a nebo alespoň bývá, většinou horizontální. Pro ty co v tom mají občas zmatek – vodorovné. Nicméně může nastat situace, kdy potřebujete na web vložit logo, které je vertikální, takzvaně „na výšku.“

Jak to udělat, aby vypadalo tak jak má? Ono je to vlastně vcelku jednoduché. Navíc výsledek může být celkem efektní a může vypadat jako logo, které překrývá menu webu.

Jako první krok vložíme na web vertikální logo. Šablona si ho upraví pro zobrazení podle svého a první pohled nás příliš nepotěší. Rozměry loga budou změněny tak aby se vešlo do pro něj určeného prostoru bez ohledu na jeho čitelnost. Jak můžeme vidět na obrázku.

Pro správné zobrazení nám ale postačí pár řádků v CSS. Do nastavení šablony Divi > Nastavení šablony > Všeobecné > Přizpůsobené CSS vložíme následující CSS:

/*** prekryvajici se logo - Zabza.eu ***/
 
#top-header {z-index: 99999;}
 
#logo {
    max-height: 190%; /* upravitelne */
    margin-top: -32px; /* upravitelne */
    z-index: 100000;
}
 
@media only screen and (max-width : 980px) {
    #logo { margin-top: 0px}}

A to je vše. Části kódu označené jako „upravitelné“ využijte k nastavení poměru velikosti loga a jeho odsazení od horního okraje. V tomto modelovém případě se muselo počítat s tím, že web používá sekundární menu, nicméně nemusí to tak být vždy. Výsledné logo můžete vidět například na tomto webu. Nic složitého, že?