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

Úvodní stránka Fórum podpory WordPressu Problémy s WordPressem Header a posunutí loga s menu k okrajům hlavního obsahu

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á 4 dny, 16 hodin.

Aktuálně je na stránce zobrazeno 6 příspěvků - 1. až 6. (z celkem 6)
  • Autor
    Příspěvky
  • #31276

    sveda.online
    Participant

    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?

    #31278

    Azifaral
    Participant
    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; }
    #31279

    Azifaral
    Participant
    Web

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

    #31281

    Azifaral
    Participant
    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>
    #31337

    sveda.online
    Participant

    Moc díky. Vyzkouším.

    #31339

    sveda.online
    Participant

    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.

Aktuálně je na stránce zobrazeno 6 příspěvků - 1. až 6. (z celkem 6)

Pokud chcete odpovědět na toto téma, musíte se nejdříve přihlásit.