Oprava menu v Divi

Pokud vytváříte menu v Divi pomocí Tvůrce motivů, zřejmě narazíte na pár nedostatků. Může se vám rozhodit jeho vzhled na menších obrazovkách nebo zjistíte, že se vám část obsahu skryje pod vytvořeným menu. Zde je pár nápadů, které vám můžou pomoct.

Přidání horní mezery pro záhlaví

Jakmile vytvoříte fixované menu, na stránce se toto menu vznáší bez toho, aby zabíralo prostor. Díky tomu vám menu může překrývat obsah stránek. Pokud nechcete, aby fixovaná navigace překrývala některé existující stránky nebo příspěvky, můžete přidat prostor nad obsah stránek. Uděláte to tak, že přidáte globální tělo šablony.

Divi tvůrce šablon

Pokračujte přidáním nového řádku pomocí následující struktury sloupců:

Přidání nového řádku

Zvolte modul „Odeslat obsah“:

Upravte nastavení Řádku a umožněte, aby řádek zabíral celou šířku sekce. Upravte vlastní mezeru mezi sloupci a nastavte maximální šířku na 100% podle obrázku:

Nastavení řádku

Otevřete nastavení u sekce i u řádku a odeberte v řádkování horní a spodní odsazení. Nakonec nastavte okraj sekce tak, aby vám navigace nepřekrývala obsah stránky. To znamená, že by okraj měl mít stejnou výšku jako menu.

Nastavení řádkování v sekci

Jakmile budete mít nastavení hotové uložte jej v tvůrci motivů.

Obsah sloupců vedle sebe

Tento kód zajistí, že se veškerý obsah sloupců zobrazí vedle sebe i na menších obrazovkách. Pokud tento kód nepoužijete, budou se moduly řadit pod sebe.

Kód pro přizpůsobení na mobilní zařízení – přidáme do CSS řádku display: flex;

Přizpůsobení menu pro responzivní design

Fixované menu

Divi v aktuální verzi umožňuje pokročilé pozicování přímo v nastavení sekce, takže následující kód zřejmě nebude potřeba. Ve starších verzích bylo nutné využívat CSS kódu, kterým se menu přilepilo k horní části stránky.

Kód pro přilepené menu na stránce – přidáme do CSS sekce
position: fixed;
top: 0;
left: 0;
right: 0;

Fixované menu

Zajímáte se o WordPress a rádi byste se naučili jak vytvořit kompletní a profesionálně vypadající web? Zkuste můj kurz WordPressu, na kterém se naučíte vše nezbytné pro tvorbu webových stránek.

22. 6. 2020

O mně

František Mlčůch

František Mlčůch

Jsem grafik, webdesigner a lektor. Pro společnost primakurzy.cz pravidelně pořádám kurzy zaměřené na tvorbu webových stránek a kurz Photoshop.

Pro své klienty se vytvářím bannerové reklamy, grafické materiály a webové stránky

 

Divi sleva 20

Další návody

20 otázek, které vám pomohou vytvořit webové stránky

20 otázek, které vám pomohou vytvořit webové stránky

Bylo by skvělé, kdyby za vámi klient přišel se všemi informacemi a úhledně uspořádaným obsahem, který by stačilo vzít a jednoduše přidat do jeho webových stránek. Bohužel se to nestává a někteří klienti předpokládají, že tohle všechno uděláte za ně. V tomto příspěvku...

DIVI a 6 nových šablon pro váš blog

DIVI a 6 nových šablon pro váš blog

Společnost Elegant Themes nedávno vydala Divi 4.0, která obsahuje Tvůrce motivů, který vám umožní vytvářet šablony pro jakoukoli z vašich stránek nebo typ příspěvků. Nejen, že můžete vytvořit vlastní záhlaví a zápatí, ale můžete vytvořit vlastní šablonu pro příspěvky...

Změna barvy hamburger menu v DIVI

Změna barvy hamburger menu v DIVI

Možná jste v šabloně Divi narazili na problém, že vaše mobilní menu nemá barvu, kterou potřebujete. Třeba chcete mít barvu mobilního hamburger menu stejnou jako barvu vašich odkazů nebo není hamburger menu vidět, protože má podobnou barvu jako vaše hlavička....