Vytváříme vertikální logo
Publikováno 12. 12. 2019
V kategorii Logo | Menu
Použité štítky: CSS, logo, menu

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?

0 komentářů

Přidat komentář

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

Buďte jednoduše v obraze

Jednou týdně vám pošleme přehled nových článků abyste nemuseli nic hledat a měli všechno najednou pohromadě. Stačí jen vložit email, odeslat a potvrdit ve zprávě kterou vám obratem zašleme odběr novinek.

Přihlášení k odběru novinek proběhlo v pořádku.

Sdílet na Pinterestu

Sdílej