Wie man ein Menü Mobile in WordPress ausblendet (Anleitung für Anfänger)
Die meisten WordPress-Themes kommen mit integrierten Stilen, die Ihre Navigationsmenüs automatisch in ein mobiles Menü umwandeln. Möglicherweise möchten Sie jedoch nicht dasselbe Menü auf dem Handy verwenden oder einen anderen Menüstil verwenden. In diesem Artikel zeigen wir Ihnen, wie Sie ein mobiles Menü in WordPress mithilfe eines Plugins oder einer Code-Methode einfach ausblenden können.
Methode 1.Ausblenden eines mobilen Menüs in WordPress mit einem Plugin
Diese Methode ist einfacher und wird für Anfänger empfohlen
Wir verwenden ein Plugin, um Ihr vorhandenes Menü mobile, das von Ihrem WordPress-Theme bereitgestellt wird, und verwenden dann ein anderes Menü oder gar kein Menü auf mobilen Geräten. Zuerst müssen Sie die Seite Darstellung " Menüs besuchen und ein neues Navigationsmenü erstellen, das Sie auf mobilen Geräten anzeigen möchten
Auf dem nächsten Bildschirm müssen Sie einen Namen für Ihr neues Menü angeben, der Ihnen hilft, es später zu identifizieren. Wir werden es "Mobiles Menü" nennen. Danach können Sie in der linken Spalte die Elemente auswählen, die Sie zu Ihrem Menü hinzufügen möchten.
Wenn Sie mit dem Hinzufügen von Elementen zu Ihrem Menü fertig sind, vergessen Sie nicht, auf die Schaltfläche "Menü speichern" zu klicken, um Ihr Menü zu speichern.
Wenn Sie Hilfe beim Erstellen eines neuen Navigationsmenüs benötigen, dann folgen Sie unserer Anleitung für Anfänger zum Erstellen eines Navigationsmenüs in WordPress. Als nächstes müssen Sie das WP Mobile Menu-Plugin installieren und aktivieren. Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung zur Installation eines WordPress-Plugins. Nach der Aktivierung müssen Sie die Seite Mobile Menu Options besuchen, um die Plugin-Einstellungen zu konfigurieren
Hier müssen Sie auswählen, ob Sie Ihr Menü mobile auf der rechten oder linken Seite anzeigen möchten, indem Sie den Kippschalter auf Ein stellen.
Wählen Sie aus dem Dropdown-Menü das mobile Menü aus, das Sie zuvor erstellt haben.
Als Nächstes müssen Sie nach unten zum Abschnitt "Hide Original Theme Menu" scrollen. Hier können Sie dem Plugin mitteilen, dass es ein von Ihrem WordPress-Theme erstelltes mobiles Menü ausblenden soll.
Standardmäßig verwendet das Plugin gängige Elementbezeichner, die von den meisten gängigen WordPress-Themes verwendet werden. Die meisten Benutzer brauchen hier nichts zu tun. Wenn das Plugin jedoch das Menü Ihres Themes nicht ausblenden kann, können Sie hierher zurückkehren und auf die Schaltfläche "Element suchen" klicken, um einfach auf das Navigationsmenü Ihres Themes zu zeigen. Vergessen Sie nicht, auf die Schaltfläche "Änderungen speichern" zu klicken, um Ihre Einstellungen zu speichern.
Nun, da wir das Plugin eingerichtet haben, müssen wir der WordPress-Seite mitteilen, dass sie unser mobiles Menü an der neuen, vom Plugin hinzugefügten Menüposition anzeigen soll. Gehen Sie einfach auf die Seite Erscheinungsbild " Menüs
Stellen Sie sicher, dass das mobile Menü, das Sie zuvor erstellt haben, im Dropdown-Menü ausgewählt ist. Wählen Sie unter Ihrem Menüpunkt die Position, die Sie in den Plugin-Einstellungen ausgewählt haben (z. B.
Linkes mobiles Menü oder Rechtes mobiles Menü).
Sie können nun Ihre Website besuchen, um Ihr neues Menü in Aktion zu sehen. Das Plugin wird nun das mobile Menü Ihres Themes ausblenden und stattdessen ein benutzerdefiniertes Menü anzeigen.
Mit dem WP Mobile Menu-Plugin können Sie die Farbe der Menüleiste ändern, die Deckkraft ändern, Symbole hinzufügen und mehr in den Einstellungen.
Spielen Sie ruhig mit diesen Einstellungen herum.
Methode 2. Mobiles Menü mit CSS-Code ausblenden
Diese Methode ist etwas fortgeschrittener und erfordert die Verwendung einiger benutzerdefinierter CSS
Bei dieser Methode können Sie zwischen zwei verschiedenen Ansätzen wählen. Sie können einfach ein komplettes mobiles Menü mit CSS ausblenden, oder Sie können einzelne Menüpunkte auf mobilen Geräten ausblenden.
1.Ausblenden eines kompletten Menüs auf mobilen Geräten per CSS
Zuerst müssen Sie herausfinden, welches Element Sie mit Hilfe von benutzerdefiniertem CSS ändern müssen
Gehen Sie dazu einfach auf Ihre Website und fahren Sie mit der Maus über Ihr Navigationsmenü. Danach klicken Sie mit der rechten Maustaste und wählen Sie das Werkzeug "Inspect".
Ihr Browser-Bildschirm wird in zwei Teile geteilt, und Sie sehen den Quellcode Ihrer Webseite.
Jetzt ist dieses Navigationsmenü nicht dasjenige, das Sie anvisieren müssen, weil es auf dem Desktop-Bildschirm sichtbar ist.
Sie müssen Ihren Browser-Bildschirm neu anordnen, indem Sie ihn von der Ecke auf eine kleinere Größe ziehen, bis das Desktop-Navigationsmenü durch das mobile Menü ersetzt ist. 
Sie müssen den Bezeichner und die CSS-Klasse herausfinden, die von Ihrem WordPress-Navigationsmenü verwendet werden.
Das können Sie tun, indem Sie die Maus auf dem Quellcode bewegen, bis der Menübereich hervorgehoben ist. Wie Sie im Screenshot oben sehen können, verwendet unser Test-Theme die Klasse navbar-toggle-wrapper. Danach müssen Sie im WordPress-Adminbereich auf die Seite Erscheinungsbild " Anpassen gehen, um den Theme-Customizer zu starten
Hier müssen Sie auf die Registerkarte "Zusätzliche CSS" wechseln und auf das Mobil-Symbol in der unteren rechten Ecke des linken Bedienfelds klicken.
Der Customizer zeigt nun eine Vorschau an, wie Ihre Seite auf mobilen Geräten aussehen wird.
Sie können nun den folgenden CSS-Code eingeben und sehen, wie Ihr mobiles Menü im Vorschaufenster verschwindet.
.navbar-toggle-wrapper { display:none }
Vergessen Sie nicht, .navbar-toggle-wrapper durch den von Ihrem WordPress-Theme verwendeten Bezeichner zu ersetzen.
Klicken Sie anschließend oben auf die Schaltfläche "Veröffentlichen", um Ihre Änderungen zu speichern.
2.Ausblenden bestimmter Menüpunkte im mobilen Menü mit CSS
Mit dieser Methode können Sie ein Navigationsmenü erstellen und dann selektiv Elemente ein- oder ausblenden, die auf mobilen oder Desktop-Geräten nicht angezeigt werden sollen
Der Vorteil dieser Methode ist, dass Sie dasselbe Navigationsmenü für Mobil- und Desktop-Geräte verwenden und einfach die Elemente ausblenden können, die nicht angezeigt werden sollen. Zuerst müssen Sie auf die Seite Erscheinungsbild " Menüs gehen und auf die Schaltfläche Bildschirmoptionen in der oberen rechten Ecke des Bildschirms klicken
Von hier aus müssen Sie das Kontrollkästchen neben der Option "CSS-Klassen" aktivieren.
Danach müssen Sie nach unten zu einem Menüpunkt scrollen, den Sie auf mobilen Geräten ausblenden möchten, und darauf klicken, um ihn zu erweitern. In den Einstellungen des Menüpunkts sehen Sie nun die Option, eine CSS-Klasse hinzuzufügen.
Fahren Sie fort und fügen Sie dort die CSS-Klasse .hide-mobile hinzu. 
Wiederholen Sie den Vorgang für alle Menüpunkte, die Sie auf Mobilgeräten nicht anzeigen möchten. Auf ähnliche Weise können Sie auch auf die Menüelemente klicken, die Sie auf Desktop-Computern ausblenden möchten.
Diesmal fügen Sie stattdessen die CSS-Klasse .hide-desktop hinzu.
Wenn Sie fertig sind, vergessen Sie nicht, auf die Schaltfläche Menü speichern zu klicken, um Ihre Änderungen zu speichern. Jetzt fügen wir benutzerdefiniertes CSS hinzu, um diese Menüelemente auszublenden. Gehen Sie einfach auf die Seite Erscheinungsbild " Anpassen, um den Theme Customizer zu starten, und klicken Sie auf die Registerkarte Zusätzliches CSS
Sie müssen den folgenden CSS-Code in das CSS-Feld einfügen.
@media (min-width: 980px){ .hide-desktop{ display: none !important; } } @media (max-width: 980px){ .hide-mobile{ display: none !important; } }
Vergessen Sie nicht, auf die Schaltfläche "Veröffentlichen" zu klicken, um Ihre Änderungen zu speichern.
Sie können nun Ihre Website besuchen und werden feststellen, dass Elemente, die Sie auf dem Desktop ausblenden wollten, nicht mehr im Menü sichtbar sind. Stellen Sie den Bildschirm Ihres Browsers auf eine kleinere Größe ein und Sie werden feststellen, dass dies auch für das mobile Menü gilt.
Wir hoffen, dass dieser Artikel Ihnen geholfen hat, zu lernen, wie Sie ein mobiles Menü in WordPress einfach ausblenden können