Hoe stel ik de header in (meescrollen, kleur, breedte)?

Stap 1: Ga naar Algemene opties → Header

Klik in het menu links in WordPress op Algemene opties en open het tabblad Header. Bovenaan staan de instellingen van de topbar, daaronder het kopje Header instellingen. Daar vind je de vier opties uit dit artikel. Klik na het aanpassen op Updaten.

Fullwidth header (navigatie)

Standaard staan logo en menu even breed als de inhoud van je pagina’s, met ruimte aan de zijkanten. Zet je Fullwidth header (navigatie) aan, dan schuiven logo en menu naar de randen van het scherm. Op een breed scherm staat het logo dan helemaal links en het menu helemaal rechts. De onderbalk en de melding onder het menu volgen dezelfde breedte.

Fixed header: het menu scrolt mee

De uitleg bij Fixed header (navigatie) is: ‘Moet het menu mee scrollen? Zet deze dan aan’. Met deze optie aan blijft de header bovenin het scherm staan terwijl je naar beneden scrolt. Je bezoekers hebben het menu dus altijd bij de hand.

Waarom de eerste sectie extra ruimte krijgt

Met een fixed header ligt de header over de bovenkant van de pagina heen. Daarom krijgt de eerste sectie van elke pagina automatisch extra ruimte aan de bovenkant, zodat het menu je tekst niet bedekt. Zie je bovenaan veel lege ruimte, dan komt het daardoor.

Header kleur en Header kleur fixed header

Je kiest twee kleuren uit je huisstijl:

• Header kleur: de kleur bovenaan de pagina. Standaard wit.
• Header kleur fixed header: de kleur zodra een bezoeker ruim 200 pixels naar beneden heeft gescrold. Standaard de hoofdkleur van je website. Dit werkt alleen met Fixed header (navigatie) aan.

De tekstkleur van het menu past zich aan de achtergrondkleur aan. Welke kleuren je kunt kiezen, lees je in kleuren en lettertypes van je website.

Transparant over je hero

Kies je bij Header kleur voor Transparent, dan ligt de header over de eerste sectie heen. Heeft die sectie een grote foto, dan lopen foto en header in elkaar over. Het menu is dan wit. Na het scrollen krijgt de header de Header kleur fixed header, zodat het menu leesbaar blijft boven de rest van de pagina.

Alleen met Fixed header

Zonder Fixed header (navigatie) ligt een transparante header niet over je foto, maar staat hij gewoon boven de pagina. Je ziet dan witte tekst op een lichte achtergrond, en die is niet te lezen. Kies Transparent dus alleen samen met Fixed header, en zorg dat de eerste sectie van elke pagina een donkere foto of kleur heeft.

Lukt het niet?

• Bovenaan je pagina staat veel lege ruimte. Met Fixed header krijgt de eerste sectie extra ruimte. Dat hoort zo. Staat er een witte sectie zonder inhoud bovenaan, haal die dan weg.
• Het menu is onleesbaar (wit op wit). Je hebt Transparent gekozen zonder Fixed header, of de eerste sectie is licht. Zet Fixed header aan of kies een andere Header kleur.
• De kleur verandert niet bij scrollen. Fixed header staat uit, of beide kleuren zijn gelijk.
• Ingelogd valt de header half onder de zwarte balk van WordPress. Dat zie alleen jij als je bent ingelogd. Bezoekers hebben er geen last van.
• Kom je er niet uit? neem contact met ons op.

Veelgestelde vragen