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á 2 roky, 8 měsíců.

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

    #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
    Web

    Moc díky. Vyzkouším.

    #31339

    sveda.online
    Participant
    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.

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.