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 du 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 keiner 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.
25 Kommentare
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.
Tausend Dank! Genau das, was mir für meine Landingpage gefehlt hat. – Made my day!
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;}
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.
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, 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.
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.
Hallo, vielen Dank für die hilfreiche und verständlich erklärte Anleitung!
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 – 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.
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.
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
Danke!!! 🤩
Ist es möglich Header und Footer der Website nur auszublenden, wenn der Aufruf der Seite beispielsweise durch eine App erfolgt?
Hallo Robin, theoretisch ist das möglich, ja, aber nicht mit reinem CSS, so wie in einem Artikel beschrieben, sondern hierzu wird mehr Programmierung (vor allem PHP) benötigt.
Hallo,
gerade jetzt mit dem Theme Twenty Seventeen die Methode 1 ausprobiert und es hat auf Anhieb geklappt. Ich habe damit die Navigation und den Kopf einer einzelnen Seite entfernt und sie auf dies Weise ein wenig anonymisiert.
Danke Dir herzlich für die konkrete Hilfe!
Armin