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
Hi Sven, vielen Dank für deinen tollen Beitrag. Ich habe bei meiner Seite im Impressum das Menü in der PC-Ansicht entfernen können, jedoch erscheint es wieder als Hamburger Menü sobald man die Ansicht enger macht. Wie entferne ich denn hier das Menü. Herzlichen Dank und viele Grüße Jennifer
Hallo Sven,
danke für diese verständliche Anleitung. Bei mir sieht die Body-Class ganz seltsam aus, Keine Site-ID. Es ist eine Seite die von Woocommerce vorbereitet war und ist eine sogenannte Archivseite, kann ich den Header da irgendwie auch wegbekommen?
Danke dir und liebe Grüße
Hallo Bettina, versuche mal anstatt „.page-id-XXX …“ eher „body.category …“ (oder body.archive …) zu nutzen. Wenn du es nur für spezielle Kategorien haben möchtest, versuche es mal mit „body.category-XYXY“, wobei du „XYXY“ durch deinen Kategorie-Namen (kleingeschrieben und Leerzeichen durch Bindestriche) ersetzt.
Hallo – und vielen Dank für die Anleitung. Mit .page-id-XXX header nav {display: none;} im Additional CSS meines Themes bekomme ich den Header auf jeder gewünschten Seite weg – nur nicht auf der Blog-Seite (die verhält sich immer irgendwie anders). Gibt es dazu vielleicht noch einen Tipp?
Vielen herzlichen Dank!
P.S. Also, das Problem im Detail, falls du es mal checken magst. Ich habe im Header eine zusätzliche Zeile eingebastelt, die die Kontaktdaten zeigt und ganz oben erscheint. Diese Zeile habe ich in WP Bakery für die mobile Darstellung ausgeblendet (so dass nur der Rest des Headers ausgelesen wird). Das klappt auch auf jeder Seite, nur eben nicht auf der Blogseite (und sieht da echt doof aus).
Hallo Borries, ich habe mir gerade mal deine Website angeschaut. Auf deiner Blog-Seite gibt es leider keine page-id, deshalb musst du anstatt .page-id-XXX nur .blog benutzen. Wenn du es ebenfalls auf allen Beitragsseiten ausblenden möchtest, dann nutze anstatt .blog nämlich .single-post…Wenn du es nur für bestimmte Beitraggseiten ausblenden möchtest dann benutze .postid-XXX
Hallo Sven, das war super nett! Vielen herzlichen Dank für die Mühe.
Riichtig super, danke dir Sven. Endlich kann ich auf der Salespage nur den Header ausblenden.
Eine Frage noch: gerne würde ich das Manü auf der Startseite ausblenden, das klappt auch super mit deiner Anleitung. Jedoch möchte ich es nur im transparenten Header und nicht im Sticky ausblenden. Hast du da evt eine Idee?
Hallo Katja, hierzu musst du den CSS-Selektor anpassen. Wenn wir nur den sticky Header, aber nicht den transparenten Header ausblenden möchten, müssen wir schauen wie sich der sticky Header vom transparenten Header im HTML Quellcode unterscheidet. Mache Rechtsklick auf den sticky Header und wähle dann „Element untersuchen“ aus. Dann suche im Quellcode nach einer class die irgendetwas mit „sticky“ heißt und diese class musst du dann als CSS-Selektor im CSS-Code benutzen. Also der CSS-Code müsste dann ähnlich wie folgt aussehen:
header .sticky-header {display: none;}
Hallo, vielen Dank für die hilfreiche und verständlich erklärte Anleitung!
Hallo, ich würde gerne auf allen Seiten den header ausblenden, auf der Startseite aber nicht.
Mit
.header-wrapper>div[class*=header] {display: none;}
blendet er es auch auf der Startseite aus 🙁
Jemand eine Idee, wie ich das generell überall ausblenden kann und nur für die Startseite eine Ausnahme einfügen kann?
Hi Miriam, im CSS gibt es einen „:not()“ Selector, damit kannst du Elemente von deiner Regel ausschließen. Dein Code müsste also ungefähr wie folgt sein:
body:not(.home) .header-wrapper>div[class*=header] {display: none;}
Mit diesem Code haben wir die Startseite von der Regel ausgeschlossen, sodass der Header auf der Startseite sichtbar bleiben sollte.