So verstecken Sie ein mobiles Menü in WordPress (Anfängerleitfaden)

Mobile Navigation kann die Benutzererfahrung Ihrer WordPress-Website verbessern oder verschlechtern. Und bei WPBeginner haben wir festgestellt, dass die Standardeinstellungen für mobile Menüs nicht immer mit dem übereinstimmen, was unsere Benutzer auf ihren Websites erreichen möchten.

Obwohl WordPress-Themes gute Arbeit leisten, um Desktop-Menüs in mobilfreundliche Versionen umzuwandeln, ist diese automatische Konvertierung nicht immer die beste Lösung.

Unsere Benutzer müssen oft unterschiedliche Navigationsoptionen für ihre mobilen Besucher anzeigen, sei es zur Vereinfachung, für Sonderangebote oder zur Verbesserung der Konversionsraten.

In diesem Artikel zeigen wir Ihnen, wie Sie das Standard-Mobilmenü in WordPress einfach ausblenden können, damit Sie stattdessen ein benutzerdefiniertes Menü anzeigen können.

Wir werden in diesem Tutorial zwei verschiedene Methoden behandeln, und Sie können die Schnelllinks unten verwenden, um zu der Methode zu springen, die Sie verwenden möchten:

• Methode 1: Ein mobiles Menü in WordPress mit einem Plugin ausblenden
• Methode 2: Mobiles Menü mit CSS-Code ausblenden

Methode 1: Ein mobiles Menü in WordPress mit einem Plugin ausblenden

Der einfachste Weg, das von Ihrem WordPress-Theme bereitgestellte mobile Menü auszublenden, ist die Verwendung des Plugins WP Mobile Menu.

Dieses Plugin ermöglicht es Ihnen, ein einzigartiges Menü zu erstellen und es dann mobilen Benutzern anzuzeigen. Sie können auch das mobile Menü ausblenden, das viele Themes standardmäßig bereitstellen.

Erstellen Sie Ihr mobiles Menü

Zuerst müssen Sie das Navigationsmenü erstellen, das Sie auf Mobilgeräten anzeigen möchten. Um zu beginnen, gehen Sie zur Seite Darstellung » Menüs in Ihrem WordPress-Dashboard.

Auf dem nächsten Bildschirm müssen Sie einen Namen für das Menü eingeben. Es ist ratsam, etwas zu verwenden, das Ihnen hilft, das Menü später zu identifizieren, z. B. „Mobiles Menü“.

Danach können Sie alle Beiträge und Seiten auswählen, die Sie zum mobilen Menü hinzufügen möchten.

Für detailliertere Anweisungen lesen Sie unseren Leitfaden, wie Sie ein Navigationsmenü in WordPress erstellen.

Wenn Sie mit dem Layout des Menüs zufrieden sind, denken Sie daran, auf die Schaltfläche „Menü speichern“ zu klicken, um Ihre Änderungen zu speichern.

Plugin-Einstellungen konfigurieren

Wenn das erledigt ist, ist es an der Zeit, das WP Mobile Menu Plugin zu installieren und zu aktivieren. Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung zum Thema Installieren eines WordPress-Plugins.

Nach der Aktivierung gehen Sie zu Mobile Menu Options, um die Plugin-Einstellungen zu konfigurieren.

Hier müssen Sie zum Ende der Seite scrollen und über die Umschalter „Left/Right Menu aktivieren“ auswählen, ob das mobile Menü auf der linken oder rechten Seite des Bildschirms angezeigt werden soll.

Öffnen Sie als Nächstes das Dropdown-Menü „Ein Menü auswählen“ und wählen Sie das zuvor erstellte mobile Menü aus.

Klicken Sie danach einfach auf „Änderungen speichern“.

Es gibt viele Möglichkeiten, Ihr WordPress-Navigationsmenü zu gestalten. Sie können zum Beispiel „Schriftoptionen“ auswählen und dann die Schriftgröße, -stärke, -abstände und mehr ändern.

Sie können auch „Header-Stil“ auswählen und ändern, wie der mobile Header aussieht und funktioniert.

Zum Beispiel können Sie einen Schatten hinzufügen, die Header-Höhe ändern, ein Sticky-Navigationsmenü erstellen und mehr.

Die meisten dieser Einstellungen sind unkompliziert, sodass Sie sie durchgehen und sehen können, welche verschiedenen Arten von Effekten Sie erzielen können. Sie können zum Beispiel ein Bildsymbol hinzufügen oder CSS zu Ihren WordPress-Menüs hinzufügen.

Wenn Sie mit der Einrichtung des mobilen Menüs zufrieden sind, klicken Sie einfach auf „Änderungen speichern“.

Fügen Sie Ihr mobiles Menü zu WordPress hinzu

Nachdem Sie das Plugin eingerichtet haben, besteht der nächste Schritt darin, WordPress mitzuteilen, wo das mobile Menü angezeigt werden soll, indem Sie zu Darstellung » Menüs gehen.

Wenn es noch nicht ausgewählt ist, öffnen Sie das Dropdown-Menü „Menü zum Bearbeiten auswählen“ und wählen Sie das zuvor erstellte mobile Menü aus.

Wählen Sie dann unter „Menüeinstellungen“ entweder „Linkes mobiles Menü“ oder „Rechtes mobiles Menü“, je nachdem, wo Sie das Menü anzeigen möchten.

Klicken Sie danach einfach auf „Menü speichern“.

Besuchen Sie nun entweder Ihre Website auf einem Mobilgerät oder zeigen Sie die mobile Version Ihrer WordPress-Website vom Desktop aus an. Sie sollten das benutzerdefinierte mobile Menü sehen.

Fehlerbehebung: So blenden Sie das Standard-Mobilmenü aus

Standardmäßig blendet das Plugin automatisch Menüelemente aus, die von den beliebtesten WordPress-Themes verwendet werden. Das bedeutet, dass das Standard-Mobilmenü Ihres Themes ausgeblendet werden sollte, ohne dass Sie etwas tun müssen.

Wenn jedoch immer noch das standardmäßige mobile Menü angezeigt wird, müssen Sie im WordPress-Dashboard zu Mobile Menu Options » General Options » Visibility Options navigieren.

Klicken Sie hier auf die Schaltfläche „Element suchen“.

Dies öffnet eine mobile Version Ihrer Website.

Klicken Sie in diesem Popup, um den Inhalt auszuwählen, den Sie auf Mobilgeräten ausblenden möchten, z. B. das vom WordPress-Theme bereitgestellte Menü.

Dies fügt die CSS-Klasse des Inhalts zum Feld „Elemente ausblenden“ hinzu.

Klicken Sie anschließend auf „Änderungen speichern“. Nun sollte das Menü des Themes auf Mobilgeräten nicht mehr angezeigt werden.

Methode 2: Mobiles Menü mit CSS-Code ausblenden

Diese Methode ist etwas fortgeschritten und erfordert, dass Sie benutzerdefinierten Code zu Ihrer Website hinzufügen.

Für diese Methode können Sie zwischen zwei verschiedenen Ansätzen wählen. Sie können das gesamte Standard-Mobilmenü mit CSS ausblenden oder einzelne Menüpunkte auf Mobilgeräten ausblenden.

1. Ein komplettes Menü auf Mobilgeräten mit CSS ausblenden

Eine Option ist, das standardmäßige mobile Menü Ihres WordPress-Themes komplett zu entfernen. Dies ist eine gute Wahl, wenn Sie eine andere Navigationsmethode für Mobilgeräte verwenden möchten, wie z. B. Breadcrumb-Navigationslinks oder interaktive Bilder.

Zuerst müssen Sie das Element finden, das Sie ändern müssen. Gehen Sie dazu einfach zu Ihrer WordPress-Website und bewegen Sie den Mauszeiger über das Navigationsmenü.

Klicken Sie danach mit der rechten Maustaste und wählen Sie das Inspektionstool Ihres Browsers aus.

Der Bildschirm Ihres Browsers wird nun geteilt, und Sie sehen den Code der Seite, einschließlich des Codes für das Navigationsmenü.

Wir möchten dieses Navigationsmenü jedoch nicht ändern, da wir es auf dem Desktop-Bildschirm sehen können.

Glücklicherweise gibt es stattdessen eine einfache Möglichkeit, auf das mobile Menü zuzugreifen.

Ziehen Sie einfach an der Ecke des Browsers, um ihn kleiner zu machen, bis WordPress das Desktop-Navigationsmenü durch das Mobilmenü ersetzt.

Nun müssen Sie den Bezeichner und die CSS-Klasse des mobilen Navigationsmenüs ermitteln. Bewegen Sie einfach Ihre Maus über den Quellcode, bis Ihr Browser den Menübereich hervorhebt. Dieser Abschnitt enthält die Klasse und den Bezeichner, die Sie verwenden müssen.

Sobald Sie diese Informationen haben, können Sie das Menü auf Mobilgeräten per Code ausblenden.

Oft werden Sie in WordPress-Anleitungen aufgefordert, benutzerdefinierten Code zu Ihrer functions.php -Datei hinzuzufügen. Dies ist jedoch nicht sehr benutzerfreundlich, und selbst ein kleiner Fehler im Code kann zu allen möglichen häufigen WordPress-Fehlern führen. Der benutzerdefinierte Code kann Ihre Website sogar vollständig beschädigen.

Stattdessen ist es sicherer, benutzerdefinierten Code mit WPCode hinzuzufügen.

Dieses kostenlose Plugin erleichtert das Hinzufügen von benutzerdefiniertem CSS, PHP, HTML und mehr zu WordPress, ohne Ihre Website zu gefährden. Sie können den Code des Plugins einfach in den Editor von WPCode einfügen und den Code dann mit einem Klick aktivieren und deaktivieren.

Zuerst müssen Sie WPCode installieren und aktivieren. Weitere Informationen finden Sie in unserer Schritt-für-Schritt-Anleitung zur Installation eines WordPress-Plugins.

Gehen Sie danach im WordPress-Dashboard zu Code-Snippets » Snippet hinzufügen .

Hier sehen Sie alle vorgefertigten Snippets, die Sie zu Ihrer Website hinzufügen können. Dies beinhaltet ein Snippet, mit dem Sie Kommentare vollständig deaktivieren, Dateitypen hochladen können, die WordPress normalerweise nicht unterstützt, Anhangsseiten deaktivieren, und vieles mehr.

Um benutzerdefiniertes CSS zu Ihrer Website hinzuzufügen, fahren Sie einfach mit der Maus über „Fügen Sie Ihren benutzerdefinierten Code hinzu“ und klicken Sie dann auf die Schaltfläche „+ Benutzerdefinierten Schnipsel hinzufügen“.

Wählen Sie dann 'CSS-Snippet' als Code-Typ aus der Liste der angezeigten Optionen aus.

Dies bringt Sie zur Seite Benutzerdefinierten Snippet erstellen.

Geben Sie zunächst einen Titel für den Code-Schnipsel ein. Dies kann alles sein, was Ihnen hilft, den Schnipsel in Ihrem WordPress-Dashboard zu identifizieren.

Danach können Sie den folgenden Code in den Code-Editor einfügen oder eingeben:

.navbar-toggle-wrapper {
display:none;
}

Vergessen Sie nicht, .navbar-toggle-wrapper durch den Bezeichner zu ersetzen, den Sie mit dem Inspektionstool Ihres Browsers gefunden haben.

Wenn Sie bereit sind, den Code-Snippet zu veröffentlichen, scrollen Sie zum oberen Bildschirmrand und klicken Sie auf den Umschalter „Inaktiv“, sodass er zu „Aktiv“ wechselt.

Klicken Sie schließlich auf 'Snippet speichern', um das Snippet live zu schalten.

Nun wird das Mobilmenü Ihres Themes auf Smartphones und Tablets ausgeblendet.

2. Bestimmte Menüpunkte im mobilen Menü mit CSS ausblenden

Diese Methode ermöglicht es Ihnen, ein Navigationsmenü zu erstellen und dann gezielt Elemente ein- oder auszublenden, die auf Mobilgeräten oder Desktops nicht erscheinen sollen.

Auf diese Weise können Sie dasselbe Navigationsmenü für mobile und Desktop-Besucher verwenden. Gehen Sie zuerst zu Darstellung » Menüs.

Wenn Sie damit fertig sind, klicken Sie oben rechts auf dem Bildschirm auf die Schaltfläche „Bildschirmoptionen“.

Von hier aus müssen Sie das Kontrollkästchen neben der Option „CSS-Klassen“ aktivieren.

Scrollen Sie danach zu einem Menüpunkt, den Sie auf Mobilgeräten ausblenden möchten, und klicken Sie darauf, um ihn zu erweitern.

In den Einstellungen des Menüpunkts sehen Sie die Option, eine CSS-Klasse hinzuzufügen. Fügen Sie hier einfach eine CSS-Klasse namens .hide-mobile hinzu.

Wiederholen Sie den Vorgang für alle Menüpunkte, die Sie auf Mobilgeräten ausblenden möchten.

Ebenso können Sie auf alle Menüpunkte klicken, die Sie auf Desktop-Computern ausblenden möchten. Fügen Sie diesmal jedoch 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.

Wenn das erledigt ist, können Sie diese Menüpunkte mit benutzerdefiniertem CSS ausblenden. Erstellen Sie einfach einen neuen benutzerdefinierten Code-Snippet, indem Sie den gleichen Prozess wie oben beschrieben befolgen.

Nun können Sie den folgenden CSS-Code in den WPCode-Code-Editor einfügen:

@media (min-width: 980px){

    .hide-desktop{
    display: none !important;
    }

}

    @media (max-width: 980px){
    .hide-mobile{
    display: none !important;
    }

}

Veröffentlichen Sie danach einfach den Code-Schnipsel.

Wenn Sie nun Ihren WordPress-Blog besuchen, werden Sie feststellen, dass die Menüpunkte, die Sie auf dem Desktop ausblenden wollten, nicht mehr sichtbar sind. Um zu testen, wie das Menü auf Mobilgeräten aussieht, verkleinern Sie einfach den Browserbildschirm, bis WordPress zum mobilen Menü wechselt.

Wir hoffen, dieser Artikel hat Ihnen geholfen zu lernen, wie Sie ein mobiles Menü in WordPress einfach ausblenden können. Möglicherweise möchten Sie auch unsere Expertenauswahl für die besten Drag-and-Drop-Seitenersteller für WordPress und unseren Leitfaden zum Thema Hinzufügen von bedingter Logik zu Menüs in WordPress ansehen.

Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Video-Tutorials. Sie finden uns auch auf Twitter und Facebook.