Het WordPress kennisplatform voor creatieve ondernemers

Happy Business Kit

Header verbergen

Je header verbergen op specifieke pagina’s

Ik krijg regelmatig de vraag hoe je het menu op bepaalde pagina’s niet kan tonen, om je bezoekers niet af te leiden. In dit artikel ga ik je laten zien hoe je dit doet met Elementor PRO en met CSS.

Uitleg voor Elementor PRO

Heb je je menu gemaakt met Elementor PRO als Template? Dan kun je het menu heel makkelijk weglaten op specifieke pagina’s.

Stap 1: Ga via ‘Bewerken met Elementor’ naar header.
Stap 2: Klik op het pijltje naast ‘Publiceren’ en open ‘Display conditions’.
Stap 3: Voeg een nieuwe conditie toe en zet deze op ‘Exlude’.
Stap 4: Zet de conditie op ‘Singular’, ‘Paginas’ en kies daarna in het laatste veld de pagina waar jij de header niet wil tonen.
Stap 5: Sla nu de conditie op en check je website!

Zoals je bij mij ziet stond er nog een standaard header van mijn thema onder de Elementor header die nu zichtbaar wordt. (Ik gebruik het thema Astra) Mocht jij dit ook hebben, volg dan nog de volgende stappen.

Stap 6: Open de Customizer en klik op ‘Header bouwer’.
Stap 7: Verwijder onderin alle elementen die in de header staan.
Stap 8: Publiceer je wijzigingen en you’re good to go!

Uitleg voor CSS

Mocht je je menu niet in Elementor hebben gebouwd, dan kun je het menu ook door middel van CSS weghalen. Dit is wel een stuk lastiger dan in Elementor, dus be ready! 🙂

Stap 1: Open je website met Google Chrome en klik op je rechtermuisknop en klik dan op ‘inspecteren’. (Dit is de allerlaatste optie in het menu)

Je ziet nu in een testscherm voor de code van je website. Je kunt hier dus niets mee kapot maken! Als je iets aanpast en je vernieuwd je pagina, dan zullen je aanpassingen weg zijn.

Stap 2: Er opent nu een blok. Scroll hierin helemaal naar boven en klik op het gedeelte waar ‘<body’ staat.
Stap 3: Klik op het plusje net als in de video, en haal alles weg behalve de punt en ‘page-id-getal’. Dit getal is bij mij 2445, maar dit verschilt per pagina. Hiermee kun je dus aangeven dat het alleen op deze pagina mag.
Stap 4: Ga in het rechtermenu over de verschillende elementen heen tot dat je ziet dat je ziet dat de gehele header geselecteerd is. NIET klikken, maar kijk wat voor text er bij ‘class=’ staat. Hier moet iets in staan met ‘header’. Omdat mijn header wel gemaakt is in Elementor, staat er bij mij ‘elementor-location-header’. Dit voeg je inclusief een punt nog toe aan dat stukje wat je al had staan.

Bij mij staat er nu dus .page-id-2445 .elementor-location-header .

Stap 5: Klik nu op TAB en typ tussen de { } de volgende code:   Display: none;

Stap 6: Je ziet nu dat de header weg is. Kopieer het geheel gedeelte en ga naar je customizer.
Stap 7: Open in de customizer het tabje ‘Extra CSS’ en plak hier de door jouw geschreven code!
Stap 8: Publiceer de pagina en you did it!

Zie je de header nu nog staan? Voeg dan achter none nog !important toe. (zodat er ‘none !important;‘ staat) Als het hier nog niet goed is, stuur mij dan een berichtje!

Laat een reactie achter

Het e-mailadres wordt niet gepubliceerd.

Anouk Martens

Anouk Martens

Hi, ik ben Anouk Martens en met mijn bedrijf Anouk Martens Producties help ik ondernemers online te shinen door middel van websites & fotografie! ☆