Es gibt durchaus manchmal die Situation bei der man das WordPress Menü ausblenden möchte und meistens sogar das Menü nur auf einer einzelnen Seite ausblenden will. Hier muss man auch unterscheiden ob man nur das Menü, also die Menüeinträge, oder auch den kompletten WordPress Header ausblenden möchte. Deshalb zeige ich euch hier wie es evtl. klappen könnte.
Das Vorgehen ist sehr stark vom verwendeten WordPress Theme abhängig, deshalb funktionieren möglicherweise nicht alle folgenden Lösungsvorschläge.
Das WordPress Menü auf einzelnen Seiten ausblenden
Möglichkeit 1: Menü per „globalem“ CSS ausblenden
Diese Variante ist zwar ein bisschen die „quick and dirty“ Variante, aber dafür die einfachste und erfolgsversprechendste Variante.
Mit folgendem CSS-Code kannst du dein WordPress Menü ausblenden:
.page-id-XXX header nav {display: none;}
/* Ersetze XXX durch die page id deiner speziellen Seite */
Füge diesen CSS Code also in deine Seite ein. Das kannst du z.B. im Customizer unter „zusätzliches CSS“, den Theme-Options (falls dein Theme Theme-Options hat) oder in deiner style.css Datei machen. Wenn du den Code in die style.css einträgst, solltest du aber ein Child-Theme und dessen style.css Datei verwenden.
Wichtig: Du musst in dem CSS Code noch das „XXX“ durch deine page id deiner Seite ersetzen, auf der du das Menü ausblenden möchtest.
Falls der Code nicht funktionieren sollte, probiere es mit diesem:
.page-id-XXX header .nav {display: none;}
/* Ersetze XXX durch die page id deiner speziellen Seite */
So kannst du die page-id herausfinden
Es gibt zwei Möglichkeiten die page-id herauszufinden.
Möglichkeit 1:
- Gehe auf die Seite auf der das Menü ausblenden möchtest.
- Mache Rechtsklick auf den Hintergrund oder eine freie Stelle auf der Seite und klicke auf „Element untersuchen“ oder „Element-Informationen“.
- Nun sollte sich ein Fenster mit dem HTML Code öffnen. Suche dort nach „<body“. Dort findest du bei class=“…“ die page-id-XXX
Möglichkeit 2:
- Gehe in den WordPress Bearbeitungsmodus deiner Seite auf der du das Menü ausblenden möchtest.
- Hier findest du nun oben in der Adresszeile deines Browsers die URL. Dort steht hinter „post=XXX“ ebenfalls die page-id.
Möglichkeit 2: Menü per seitenspezifischen CSS ausblenden
Diese Möglichkeit ist nicht ganz so „dirty“ wie die 1. Möglichkeit. Manche Themes oder Page Builder bieten die Möglichkeit CSS Code nur für eine spezielle Seite einzutragen und auszuspielen. Der Visual Composer / WPBakery Page Builder und der Elementor können das beispielsweise.
Da der CSS Code dann sowieso nur auf dieser einen Seite ausgeführt wird, hat es den Vorteil, dass man nicht, wie in Möglichkeit 1, mit den page-id’s arbeiten muss. Füge dort also folgenden CSS Code ein:
header nav {display: none;}
Falls der Code nicht funktionieren sollte, probiere es mit diesem:
header .nav {display: none;}
Möglichkeit 3: Menü per PHP Code ausblenden
Diese Möglichkeit ist die mit Abstand schwierigste und kommt ebenfalls stark auf dein verwendetes Theme drauf an. Dies wäre aber die „sauberste“ Methode, weil somit dein Menü nicht nur ausgeblendet wird, sondern gar nicht erst im HTML Quellcode landet.
Bei dieser Methode wird der Befehl wp_nav_menu(...)
, welcher sich im Theme dein WordPress Menü holt und ausgibt, in eine bedingte Anweisung (if-Anweisung) zu packen. Dann wird nämlich das Menü nur ausgegeben wenn die page id nicht deiner bestimmten Seite entspricht. Der PHP Code dafür lautet in etwa:
<?php
if (!is_page(XXX)) {
wp_nav_menu(...);
}
?>
Das XXX muss durch die page id ersetzt werden.
Der PHP Code bzw. die if-Anweisung um den wp_nav_menu Befehl muss eben dort platziert sein wo auch dein Theme den wp_nav_menu Befehl aufruft. Dies kann je nach Theme an einer anderen Stelle bzw. anderen PHP-Datei sein. Evtl. findest du die Stelle in der header.php Datei. Wenn du Änderungen an den Theme-Dateien machst, solltest du aber ein Child-Theme verwenden, weil sonst deine Änderungen beim nächsten Theme Update überschrieben werden.
Den kompletten WordPress Header auf einzelnen Seiten ausblenden
Du kannst nicht nur das Menü ausblenden, sondern natürlich auch gleich den ganzen WordPress Header auf einzelnen Seiten ausblenden. Mit dem Header ist hier der ganze Balken in dem das Menü sitzt gemeint, also auch der Teil wo das Logo, etc. angezeigt wird.
Um den Header auf einzelnen Seiten auszublenden musst du im Grunde die selben Möglichkeiten 1 und 2 wie auch beim Menü ausblenden benutzen. Lediglich der CSS Code den du einfügen musst sieht ein bisschen anders aus.
Der CSS Code für Möglichkeit 1 lautet:
.page-id-XXX header {display: none;}
/* Ersetze XXX durch die page id deiner speziellen Seite */
Falls der Code nicht funktionieren sollte, probiere es mit diesem:
.page-id-XXX .header {display: none;}
/* Ersetze XXX durch die page id deiner speziellen Seite */
Der CSS Code für Möglichkeit 2 lautet:
header {display: none;}
Falls der Code nicht funktionieren sollte, probiere es mit diesem:
.header {display: none;}
Falls keine der genannten CSS Codes funktionieren sollte, probiere hinter das „display:none“ ein „!important“ zu schreiben. Also in etwa „…display:none !important;“ (ohne Anführungszeichen)
Falls du weitere Informationen zu WordPress Menüs benötigst, habe ich einen Artikel geschrieben wie man ein WordPress Menü erstellen und bearbeiten kann.
22 Kommentare
Kommentar hinzufügen Antworten abbrechen
Hallo Sven, bei einigen meiner Seiten ist der Header eingeblendet, bei anderen wiederum ausgeblendet. Ich hätte gerne alle einegeblendet.
Wie passe ich das in den Einstellungen an?
Viele Grüße
Michael
Hallo Michael,
die Frage kann ich leider so nicht beantworten, weil ich nicht weiß wie die Header ausgeblendet wurden.
Danke für die gut verständliche Anleitung. Ein Frage noch: Statt des Menüs ist da jetzt ein Leerraum, bekommt man den auch noch weg?
Hi Jan, spontan fallen mir zwei Dinge ein, woran es liegen könnte, dass ein Leerraum entsteht:
1) Du hast mit dem CSS-Code nicht das äußerste Element erwischt, sondern nur ein inneres Element und deshalb ist noch der äußere Container sichtbar, welcher diesen Leerraum erzeugt. Versuche also mal mit dem Selektor etwas rumzuprobieren und ein übergeordnetes Element im Selektor anzugeben.
2) Der darunterliegen Inhaltsbereich bzw. Container vom Inhalt hat evtl. einen Abstand nach oben, also Margin oder Padding. Prüfe also, ob der äußeren Container des Inhaltsbereichs Margin oder Padding Werte zugewiesen haben.
Hallo Sven! Ich habe deinen Tipp für header {display: none;} via Elementor probiert aber es funkt weder mit dem Punkt davor noch mit !important leider nicht. Hast du noch vielleicht eine Idee? Der Header, den ich ausblenden möchte, ist auf einer „internen“ Blog-Seite (user_blog) des Plugins Profile Grid platziert. Sollte aber mMn keine Rolle spielen, da ich den Snipset direkt dort einsetze. Oder?
Danke mal vorab für eine kurze Einschätzung!
Hey Peter, falls du Elementor Pro nutzt und der Header aus Elementor kommt, kannst du den Header ganz bequem per Elementor und ohne CSS ein- und ausblenden. Wenn du in Elementor den Header bearbeitest, kannst du beim Speichern angeben unter welchen Bedingungen er angezeigt oder nicht angezeigt werden soll. Oder kommt der Header aus deinem Theme? Dann prüfe mal, ob dein CSS-Code auch wirklich im HTML (des Frontend) ausgespielt wird. Evtl. stimmt auch der Selector nicht, also prüfe auch per Rechtsklick „Element untersuchen“, ob der CSS-Code auf dein gewünschtes HTML-Element ausgeführt wird.
Ansonsten ist das leider schwer zu sagen, ohne die Seite und den Code zu sehen.
Tausend Dank! Toller Tipp. Das war genau das, was ich brauchte für eine Landingpage. =)
Frage: geht das auch mit dem Footer? Wenn ja, wie?
Hallo Nancy, ja theoretisch funktioniert der CSS Code mit dem display:none bei jedem HTML Element, man muss nur den richtigen Selektor angeben/finden. Versuche also mal anstatt „header nav {display: none;}“ soetwas wie „footer {display: none;}
Tausend Dank! Genau das, was mir für meine Landingpage gefehlt hat. – Made my day!
Danke Dir! Ich nutze Betheme und musste tatsächlich bis zum 2. Abschnitt vorrücken und den ganzen header ausblenden, da ich einen eigenen Link-Tree ohne Menü erstellen wollte.