Ondersteuning » Thema en CSS/opmaak » Menu en logo centreren

8 reacties aan het bekijken - 1 tot 8 (van in totaal 8)
  • Dag Jorieke,

    Heb je in de thema opties gekeken of dit mogelijk is voor jouw thema?

    Groet,
    Thijs
    __________________
    De meest volledige WordPress handleidingen vind je bij WP Handleiding
    Professioneel WordPress design nodig? Bekijk hier ons portfolio.

    Thread starter jorieke

    (@jorieke)

    Dag Theo,

    Ja, daar heb ik alle tabbladen doorgekeken, maar zit geen optie ‘Centre’ of iets dergelijks.

    Fijne dag,
    Jorieke

    Pas/voeg in je style de volgende css aan/toe om de navigatie centreren:


    .navbar-nav {
    float: none;
    text-align: center;
    }

    .navbar-nav>li {
    display: inline-block;
    float: none;
    }

    Je logo wordt iets lastiger. Dit komt omdat deze in een container zit die 50% breed is. Ga je die op 100% zetten en de inhoud centreren (in dit geval je logo) dan zullen de social media iconen buiten het zichtbare worden gedrukt. Vraag is dus beetje wat je hiermee wilt..

    Ik heb verder nog geen rekening gehouden met het feit dat je bootstrap gebruikt. Het kan dus zijn dat in een kleinere weergave, zoals op mobiel, deze te wensen over laat. Ook is het niet onverstandig om een child theme van je css te maken daar gezien je bij updates de wijzigingen niet verliest. Zowel bij updaten van bootstrap als je thema.

    Thread starter jorieke

    (@jorieke)

    Hoi Ruurd,

    Dank voor je hulp! Het menu is nu in elk geval al gecentreerd. Dat vind ik inderdaad wel veel mooier.

    De social media icons mogen wel wegvallen, dat zet ik dan wel op de contactpagina. Hoe kan ik die container terug vinden in de css? Dan kan ik even proberen wat er gebeurt op bijv. mobiel.

    Een child theme zal ik aan gaan maken, eens uitvogelen hoe dat werkt.

    Als het goed is zie je bij Weergave > Editor ook een bestand “header.php” staan. Deze moet je aanpassen om de social media eruit te halen en het logo te kunnen centreren.

    Zoek als eerst deze regel op in header.php:

    <div class="site-branding col-md-6">

    En verander de “col-md-6” naar “col-md-12”.

    Vervolgens pas/voeg je het volgende in je style.css aan/toe:


    .social-header { display: none; }
    .site-branding { text-align: center; }

    Thread starter jorieke

    (@jorieke)

    Dat werkt helemaal. Veel dank Ruurd!!

    Graag gedaan! Zou je dit topic op [resolved] willen zetten?

    Thread starter jorieke

    (@jorieke)

    ga ik doen!

8 reacties aan het bekijken - 1 tot 8 (van in totaal 8)
  • Het onderwerp ‘Menu en logo centreren’ is gesloten voor nieuwe reacties.