Header a posunutí loga s menu k okrajům hlavního obsahu

[sveda.onlineParticipant Web]

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?

[AzifaralParticipant Web]

Dobrý 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; }

[AzifaralParticipant Web]

Aááá kecám, ten padding nebude stačit.

[AzifaralParticipant Web]

Bude 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>

[sveda.onlineParticipant Web]

Moc díky. Vyzkouším.

[sveda.onlineParticipant Web]

Dobrý 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.

[Autor]

Příspěvky