Úvodní stránka › Fórum podpory WordPressu › Problémy s WordPressem › Header a posunutí loga s menu k okrajům hlavního obsahu
Štítky: Child Themes, CSS, Custom CSS, Simple Custom CSS
Zvolené téma obsahuje celkem 5 odpovědí. Do diskuze (2 účastníci) se naposledy zapojil uživatel sveda.online a poslední změna je stará 8 let, 2 měsíce.
-
AutorPříspěvky
-
12. února 2017 (13:06) #31276
Dobrý den,
mám problém s headerem u této stránky: http://www.cema.cz.uvirt57.active24.cz/. Potřeboval bych, aby logo i menu bylo zarovnáno k okrajům hlavního obsahu? Zatím se mi to nedaří i kvůli responzivitě. Ví někdo, jak na to?
12. února 2017 (14:34) #31278Dobrý den,
jedná se o úpravu CCS, kde přidáte ten padding. A samozřejmě pokud chcete u toho zarovnání zohlednit responsivitu tak to musíte také zapodmínkovat pomocí @media (min-width: 768px), takže výsledně ten kód bude takto. Nezapomeňte, že je toto nutno dát do Custom CSS, případně Child Themes, tak aby při update šablony nedošlo k přepsání.
@media (min-width: 768px) #navigation .navbar { margin: 0px; border: none; padding: 0px 110px; }
12. února 2017 (14:43) #3127912. února 2017 (15:26) #31281Bude to trochu složitější. Budete tam muset sáhnout do php souboru, předpokládám, že do header.php a vložit tam div, který zapouzdří ty 2 divy (logo + menu). A tomu divu dáte třídu např. header-middle a těmito parametry, takže výsledek bude takto:
@media (min-width: 768px) #header-middle {width: 1210px;margin: 0 auto;}
V bootstrap.min.css najdete @media (min-width: 768px) .navbar-header a zrušíte float: left
A zde je upravený html kód, je velmi pravděpodobné, že v tom php souboru to bude kapku jinak, ale důležité je to umístění toho divu. Jedná se prostě o to, že musíte vložit ty 2 divy do jednoho divu a ten zarovnat na střed. Snad jsem to popsal dost srozumitelně a nikde se neseknul.
<nav id="navigation"> <div class="navbar navbar-inverse affix top" role="navigation"> <div class="navbar-header"> <div id="header-middle"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <!-- Logo Starts --> <a class="navbar-brand" href="http://www.cema.cz.uvirt57.active24.cz/"><img src="http://www.cema.cz.uvirt57.active24.cz/wp-content/uploads/2017/02/Logo-CEMA_2.png" alt=""></a> <!-- Logo Ends --> <div class="collapse navbar-collapse pull-right"> <ul id="menu-menu-1" class="nav navbar-nav"><li id="menu-item-241" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-241"><a title="Připravované akce" href="http://www.cema.cz.uvirt57.active24.cz/pripravovane-akce/">Připravované akce</a></li> <li id="menu-item-236" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-236"><a title="Kalendář akcí" href="http://www.cema.cz.uvirt57.active24.cz/akce/">Kalendář akcí</a></li> <li id="menu-item-237" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-237"><a title="Kontakt" href="http://www.cema.cz.uvirt57.active24.cz/kontakt/">Kontakt</a></li> </ul> </div></div></div> <!--/.nav-collapse --> </div> <div class="navspacer"></div> </nav>
17. února 2017 (17:10) #31337Moc díky. Vyzkouším.
17. února 2017 (17:27) #31339Dobrý den, tak mi to nějak nefunguje. Kdybych Vám poslal přístupy, provedl byste to? Za kolik byste tuto změnu provedl? Díky moc.
-
AutorPříspěvky
Pokud chcete odpovědět na toto téma, musíte se nejdříve přihlásit.