Support » CSS / opmaak vragen » Menu kleur

5 reacties aan het bekijken - 1 tot 5 (van in totaal 5)
  • Door een aanpassing te maken in het css. Geen idee welke want daar voor zou ik de website moeten bekijken.

    Dus als je een beter antwoord wilt mag ik dan het adres van de website?

    Het adres van de website is http://www.mixandstretch.com

    Dat heb ik al geprobeerd maar er gebeurt niks.

    Oké mag ik het toch nog een keer proberen?
    Als eerst maar de header die een donkere achtergrond kleur heeftwat op twee plekken word aangegeven.
    Als eerst heb jij dat waarschijnlijk aangegeven in je instellingen van je thema want dit staat in de index.php van je website;

    .site-header, .secondary-navigation ul ul, .main-navigation ul.menu > li.menu-item-has-children:after, .secondary-navigation ul.menu ul, .storefront-handheld-footer-bar, .storefront-handheld-footer-bar ul li > a, .storefront-handheld-footer-bar ul li.search .site-search, button.menu-toggle, button.menu-toggle:hover {
        background-color: #ffffff;
    }

    Als ik die uitschakel komt een donkergrijze kleur tevoorschijn die geregeld word door syle.css dus waarschijnlijk standaard is voor dit thema.

    .site-header {
        background-color: #2c2d33;
        padding-top: 1.618em;
        padding-bottom: 1.618em;
        color: #9aa0a7;
        background-position: center center;
        position: relative;
        z-index: 999;
    }

    Maar de menubalk blijft nog steeds wit maar dat komt weer door een instelling die je, waarschijnlijk, weer zelf heb gemaakt want in de index.php vind ik deze code;

    .storefront-primary-navigation {
        clear: both;
        background: #fff;
        margin-left: -99em;
        margin-right: -99em;
        padding-left: 99em;
        padding-right: 99em;
    }

    Weer moet de achtergrond wit zijn volgens deze declaratie. Als ik dat uitschakel blijft alleen het menu nog wit en dat blijkt, uiteindelijk geregeld worden door weer een instelling van het thema zelf want het volgende staat in de index.php;

    .menu {
        background-color: #fff;
    }

    Als deze dan ook uitgeschakeld is zie je een, minimale, kleurverschil tussen de menubalk en de header zelf en die word veroorzaakt door een instelling in de style.css waarbij word aangegeven dat de kleur zwart moet zijn maar een transparantie van 0.06 wat dus minimaal is. Zie hier de code daar voor;

    style.css
    @media (min-width: 768px)
    .storefront-primary-navigation {
        clear: both;
        background: rgba(0,0,0,.06);
        margin-left: -99em;
        margin-right: -99em;
        padding-left: 99em;
        padding-right: 99em;
    }

    Succes gewenst met het naar jouw zin maken.

    Arjan,

    Mag ik even inhaken met vrijwel dezelfde vraag:
    Ik gebruik WP 4.7.3 met thema 2013 op site http://www.mijnhuisvanmorgen.nl/wordpress/2017/03/16/welkom-bij-mijn-huis-van-morgen/
    Ik wil de menu balk ook in de blauwe kleur hebben.
    Welke code moet ik gebruiken in welke file ?

    Dank bijvoorbaat,

    Wim.

    Dat is grappig want de template voor de versie die je op http://www.mijnhuisvanmorgen.nl/ ziet staan is door mij gemaakt.
    En nu proberen jullie om in WP deze na te maken!

    De juiste code vind je in de style.css en dan moet je zoeken naar main-navigation en als het goed is zie je dan het volgende;

    .main-navigation {
        clear: both;
        margin: 0 auto;
        max-width: 1080px;
        min-height: 45px;
        position: relative;
    }

    Dat moet je aanpassen naar

    .main-navigation {
        clear: both;
        margin: 0 auto;
        max-width: 1080px;
        min-height: 45px;
        position: relative;
        background-color: #95d3e2;
    }

    Alleen is nu de balk maar 1080 pixels breed maar die kan je ook aanpassen door met de max-width te gaan spelen of deze helemaal weg halen. Als je hem helemaal weg haalt zou ik wel een linker en rechter ruimte in de laag (padding) aanbrengen.

5 reacties aan het bekijken - 1 tot 5 (van in totaal 5)
  • Het onderwerp ‘Menu kleur’ is gesloten voor nieuwe reacties.