Möchten Sie ein mobiles Menü in WordPress ausblenden?
Die meisten WordPress-Themes verfügen über integrierte Stile, die Ihre Navigationsmenüs automatisch in ein mobiles Menü umwandeln. Möglicherweise möchten Sie jedoch nicht dasselbe Menü auf Ihrem Mobilgerät verwenden, oder Sie möchten einen anderen Menüstil verwenden.
In diesem Artikel zeigen wir Ihnen, wie Sie ein mobiles Menü in WordPress mithilfe eines Plugins oder einer Codemethode einfach ausblenden können.
Methode 1. Verstecken Sie ein mobiles Menü in WordPress mit einem Plugin
Diese Methode ist einfacher und wird Anfängern empfohlen. Wir werden ein Plugin verwenden, um Ihr vorhandenes mobiles Menü, das von Ihrem WordPress-Theme bereitgestellt wird, auszublenden und dann ein anderes Menü oder überhaupt kein Menü auf mobilen Geräten zu verwenden.
Zuerst müssen Sie die besuchen Aussehen »Menüs Seite und erstellen Sie ein neues Navigationsmenü, das Sie auf Mobilgeräten anzeigen möchten.
Auf dem nächsten Bildschirm müssen Sie einen Namen für Ihr neues Menü angeben, damit Sie es später leichter identifizieren können. Wir nennen es „Mobiles Menü“. Danach können Sie in der linken Spalte die Elemente auswählen, die Sie 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, folgen Sie unserem Anfängerleitfaden zum Erstellen eines WordPress-Navigationsmenüs.
Als nächstes müssen Sie das Plugin WP Mobile Menu installieren und aktivieren. Weitere Informationen finden Sie in unserer Schritt-für-Schritt-Anleitung zur Installation eines WordPress-Plugins.
Nach der Aktivierung müssen Sie besuchen Mobile Menüoptionen Seite zum Konfigurieren der Plugin-Einstellungen. Von hier aus müssen Sie auswählen, ob Sie das Menü Ihres Mobilgeräts rechts oder links anzeigen möchten, indem Sie den Schalter umschalten.
Wählen Sie im Dropdown-Menü das zuvor erstellte mobile Menü aus.
Als nächstes müssen Sie nach unten zum Abschnitt „Original-Designmenü ausblenden“ scrollen. Hier können Sie das Plugin anweisen, ein von Ihrem WordPress-Theme erstelltes mobiles Menü auszublenden.
Standardmäßig verwendet das Plugin häufig verwendete Elementkennungen, die von den beliebtesten WordPress-Themen verwendet werden. Die meisten Benutzer müssten hier nichts tun.
Wenn das Plugin das Menü Ihres Designs jedoch nicht ausblendet, können Sie hierher zurückkehren und auf die Schaltfläche „Objekt suchen“ klicken, um einfach auf das Navigationsmenü Ihres Designs zu zeigen.
Vergessen Sie nicht, auf die Schaltfläche Änderungen speichern zu klicken, um Ihre Einstellungen zu speichern.
Nachdem wir das Plugin konfiguriert haben, müssen wir die WordPress-Site anweisen, unser mobiles Menü an der neuen Menüposition anzuzeigen, die vom Plugin hinzugefügt wurde.
Gehen Sie einfach zu Aussehen »Menüs Seite. Stellen Sie sicher, dass das zuvor erstellte mobile Menü in der Dropdown-Liste ausgewählt ist. Wählen Sie unter Ihrem Menüpunkt den Ort aus, den Sie in den Plugin-Einstellungen ausgewählt haben (z. B. linkes mobiles Menü oder rechtes mobiles Menü).
Sie können jetzt Ihre Website besuchen, um Ihr neues Menü in Aktion zu sehen. Das Plugin blendet nun das mobile Menü aus Ihrem Design aus und zeigt stattdessen ein benutzerdefiniertes Menü an.
Mit dem Plugin WP Mobile Menu können Sie die Farbe der Menüleiste ändern, die Deckkraft ändern, Symbole hinzufügen und mehr in den Einstellungen. Fühlen Sie sich frei, mit diesen Einstellungen herumzuspielen.
Methode 2. Mobiles Menü mit CSS-Code ausblenden
Diese Methode ist etwas fortgeschritten und erfordert die Verwendung von benutzerdefiniertem CSS.
Für diese 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 Mobilgeräten ausblenden.
1. Verstecken Sie ein ganzes Menü auf mobilen Geräten mit CSS
Zuerst müssen Sie das Element herausfinden, das Sie mithilfe von benutzerdefiniertem CSS ändern müssen. Gehen Sie dazu einfach auf Ihre Website und bewegen Sie die Maus über Ihr Navigationsmenü. Klicken Sie danach mit der rechten Maustaste und wählen Sie Werkzeug prüfen.
Ihr Browser-Bildschirm wird zweigeteilt und Sie sehen den Quellcode Ihrer Webseite. Jetzt ist dieses Navigationsmenü nicht dasjenige, auf das Sie zeigen müssen, da 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 wird.
Sie müssen den Bezeichner und die CSS-Klasse herausfinden, die Ihr WordPress-Navigationsmenü verwendet. Sie können dies tun, indem Sie mit der Maus über den Quellcode fahren, bis der Menübereich markiert ist.
Wie Sie im obigen Screenshot sehen können, verwendet unser Testdesign die Klasse navbar-toggle-wrapper.
Danach sollten Sie zu gehen Aussehen » Anpassen Seite im WordPress-Adminbereich, um den Theme Customizer zu starten. Hier müssen Sie zur Registerkarte „Zusätzliches CSS“ wechseln und auf das mobile Symbol in der rechten unteren Ecke des linken Bereichs klicken.
Der Customizer zeigt nun eine Vorschau an, wie Ihre Website auf Mobilgeräten aussehen wird. Sie können jetzt den folgenden CSS-Code eingeben und sehen, wie Ihr mobiles Menü im Vorschaufenster verschwindet.
.navbar-toggle-wrapper {
display:none;
}
Vergessen Sie nicht, den .navbar-toggle-wrapper durch die von Ihrem WordPress-Theme verwendete Kennung zu ersetzen.
Klicken Sie danach oben auf die Schaltfläche „Veröffentlichen“, um Ihre Änderungen zu speichern.
2. Blenden Sie bestimmte Menüpunkte im mobilen Menü mit CSS aus
Mit dieser Methode können Sie ein Navigationsmenü erstellen und dann Elemente, die Sie nicht auf Mobilgeräten oder Desktops anzeigen möchten, selektiv ein- oder ausblenden.
Der Vorteil dieser Methode besteht darin, dass Sie dasselbe Navigationsmenü für Mobilgeräte und Desktops verwenden und einfach die Elemente ausblenden können, die Sie nicht sehen möchten.
Zuerst müssen Sie zu gehen Aussehen »Menüs Seite und klicken Sie auf die Schaltfläche Bildschirmoptionen in der oberen rechten Ecke des Bildschirms. Von hier aus müssen Sie das Kontrollkästchen neben der Option „CSS-Klassen“ aktivieren.
Nach. Sie müssen nach unten zu einem Menüpunkt scrollen, den Sie auf Mobilgeräten ausblenden möchten, und klicken, um ihn zu erweitern. In den Menüpunkt Einstellungen sehen Sie nun die Möglichkeit, 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 nicht auf dem Mobilgerät anzeigen möchten.
Ebenso können Sie auf Desktop-Computern auch auf Menüpunkte klicken, die Sie ausblenden möchten. Fügen Sie dieses Mal 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.
Wir werden jetzt benutzerdefiniertes CSS hinzufügen, um diese Menüelemente auszublenden. Gehen Sie einfach zu Aussehen » Anpassen Seite, um den Design-Anpasser 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 jetzt Ihre Website besuchen und werden feststellen, dass die Elemente, die Sie auf dem Desktop ausblenden wollten, nicht mehr im Menü sichtbar sind. Stellen Sie Ihren Browser-Bildschirm auf eine kleinere Größe ein und Sie werden dasselbe für das mobile Menü bemerken.
Wir hoffen, dass dieser Artikel Ihnen geholfen hat, zu lernen, wie Sie ein mobiles Menü in WordPress einfach ausblenden können. Vielleicht möchten Sie auch unseren Artikel zum Erstellen benutzerdefinierter Seiten in WordPress oder zum Erstellen eines benutzerdefinierten Designs von Grund auf neu lesen, ohne Code schreiben zu müssen.
Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Video-Tutorials. Sie finden uns auch unter Twitter Y Facebook.
