So verstecken Sie ein mobiles Menü in WordPress (Schritt für Schritt)

Wenn Sie in WordPress Menüs von Mobilgeräten ausblenden möchten, lesen Sie diesen Blog weiter

Sie werden feststellen, dass die meisten WordPress-Themes mit integrierten Stilen ausgestattet sind, die Ihnen helfen, das Navigationsmenü automatisch in ein mobiles Menü umzuwandeln.

Auf Ihrem Mobiltelefon möchten Sie möglicherweise kein ähnliches Menü verwenden, da Sie möglicherweise nach verschiedenen Menüstilen suchen, um die Anzeige auf Ihren Mobiltelefonen zu erhalten.

Nachfolgend finden Sie zwei verschiedene Methoden zum Ausblenden eines mobilen Menüs in WordPress:

Methode 1: Mobile Menüs mit dem WordPress-Plugin ausblenden

Für Anfänger wird Methode 1 empfohlen, da sie sich nicht mit der Codierung herumschlagen müssen, sie müssen nur Plugins verwenden, um das mobile Menü auszublenden, das standardmäßig vom WordPress-Theme vorgegeben wird.

Nachdem sie dies ausgeblendet haben, können sie verschiedene Menüs verwenden oder sich dafür entscheiden, kein Menü auf Mobilgeräten anzuzeigen.

Um das WordPress-Plugin zu verwenden, muss sich der Anfänger zuerst im WordPress-Dashboard anmelden und dann auf Aussehen und dann auf die Menüseite klicken. Hier können sie ein neues Navigationsmenü erstellen, um es auf Handheld-Geräten zu präsentieren.

Jetzt finden Sie einen anderen Bildschirm, auf dem Sie einen neuen Menünamen haben, damit Sie ihn bei Bedarf erkennen können. Bedenken Sie, dass Sie den Namen als „Telefonmenü“ hinzugefügt haben. Jetzt können Sie den Artikel auswählen.

Nachdem Sie die Elemente zum Menü hinzugefügt haben, ist es jetzt an der Zeit, auf die Schaltfläche Menü speichern zu klicken.

Jetzt können Sie aus dem WordPress-Plugin-Repository ein WP Mobile-Menü auswählen – und es herunterladen. Oder Sie können dieses Plugin direkt von Ihrem WordPress-Dashboard aus installieren.

Sie müssen nach der Aktivierung zur mobilen Menüseite gehen, um die Plugin-Einstellungen zu konfigurieren.
Hier finden Sie nun eine Option, um Ihr Telefonmenü links oder rechts zu erstellen. Sie können die Option b ein- oder ausschalten.

Wählen Sie nun das zuvor erstellte Telefonmenü aus dem Dropdown-Menü aus.

Scrollen Sie nun die Seite nach unten, bis Sie eine Option für „Original-Designmenü ausblenden“ erhalten. Jetzt hilft Ihnen diese Option, dem Plugin mitzuteilen, dass das mobile Menü des WordPress-Themes ausgeblendet werden muss.

Standardmäßig werden die am häufigsten verwendeten Elemente identifiziert, die von den mobilfreundlichen WordPress-Designs verwendet werden, und von Plugins verwendet. Die meisten Website-Benutzer müssen hier nichts tun.

Angenommen, das von Ihnen verwendete Plugin kann ein mobiles Menü Ihrer Themen nicht ausblenden, dann können Sie dieselbe Seite erneut besuchen und mit der Maus auf „Element finden“ klicken, um auf das Navigationsmenü Ihres Themas zu verweisen.

Um alle Ihre Einstellungen zu speichern, vergessen Sie nicht, Änderungen zu speichern.

Jetzt, da wir die Verwendung des Plugins konfiguriert haben, müssen Sie Ihrer Website mitteilen, dass sie das Telefonmenü anzeigen muss, das vom Plugin an einer neuen Menüposition hinzugefügt wird.

Um dies zu tun:

Gehen Sie zum Auftritt und klicken Sie auf die Menüseite.

Stellen Sie sicher, dass im Dropdown-Menü das von Ihnen erstellte Telefonmenü richtig ausgewählt ist. Wählen Sie nun den Ort unterhalb des Menüpunkts aus, dh rechtes mobiles Menü oder linkes mobiles Menü.

Überprüfen Sie nun, ob das neue Menü auf Ihrer Website sichtbar ist oder nicht. Das von uns verwendete Plugin zeigt jedoch nicht das mobile Menü Ihres Themas, sondern das von uns erstellte Menü, dh das Telefonmenü.

Das von uns vorgeschlagene Plugin, dh das WP-Plugin für mobile Menüs, hilft Ihnen, die Farbe der Menüleiste zu ändern, weitere Symbole hinzuzufügen, die Deckkraft zu ändern und vieles mehr in den Einstellungen. Solche Einstellungsmöglichkeiten können Sie einfach und frei nutzen.

Methode 2: Mit Hilfe des Codes das mobile Menü ausblenden

Stellen Sie bei der Auswahl dieser Methode zum Ausblenden eines mobilen Menüs sicher, dass Sie Erfahrung im Programmieren haben oder zumindest einige benutzerdefinierte CSS kennen.

Für diese Methode haben Sie zwei verschiedene Ansätze. Entweder Sie können das komplette mobile Menü mit Hilfe von CSS unsichtbar machen, oder Sie können einzelne Punkte auf mobilen Geräten unsichtbar machen.

Machen Sie Ihr komplettes Menü auf kleinen Geräten mit CSS unsichtbar

Die Elemente, die Sie mithilfe von benutzerdefiniertem CSS-Code ändern möchten, müssen ermittelt werden. Um dies durchzuführen, müssen Sie zuerst Ihre Website besuchen und dann auf das Navigationsmenü klicken. Klicken Sie nun mit der rechten Maustaste darauf und wählen Sie ein Prüfwerkzeug aus.

Jetzt finden Sie die zwei verschiedenen Bildschirme. Auf einem Bildschirm wird Ihre Website angezeigt, während auf einem anderen Bildschirm der Quellcode angezeigt wird. Sie müssen jedoch den Browserbildschirm auf eine kleinere Größe einstellen, es sei denn, das Navigationsmenü Ihres Desktops wird nicht durch das mobile Menü ersetzt.

Jetzt müssen das CSS und die Identifikatoren, die vom Navigationsmenü Ihrer WordPress-Website verwendet werden, ermittelt werden. Durch Bewegen der Maus über den Quellcode Ihrer Website können Sie den Menübereich hervorheben.

• Gehen Sie nun zum WordPress-Dashboard.
• Klicken Sie auf Aussehen
• Gehen Sie zur Option zum Anpassen der Seite, um den Design-Anpasser zu starten.
• Jetzt können Sie zur Registerkarte „Zusätzliches CSS“ zurückkehren und in der rechten Ecke Ihres Admin-Bereichs auf das mobile Symbol klicken.

Ein Customizer zeigt Ihnen in einer Vorschau an, wie Ihre Website auf Telefonen aussieht. Der unten erwähnte CSS-Code muss hinzugefügt werden und im Vorschaubereich verschwindet das mobile Menü.

.navbar-toggle-wrapper { 
Anzeige: keine; 
}

Stellen Sie sicher, dass Sie den .nav-toggle-wrapper durch die Kennung ersetzt haben, die Ihr WordPress-Theme verwendet.
Klicken Sie oben auf die Schaltfläche „Veröffentlichen“, um alle Änderungen zu speichern.

Machen Sie bestimmte Menüs mithilfe von CSS auf Ihrem Handy unsichtbar

Dies ist der zweite Ansatz, um ein mobiles Menü auszublenden. Bei diesem Ansatz werden Sie aufgefordert, ein Navigationsmenü zu erstellen und dann das mobile Menü auf Ihrem Desktop oder Ihren Mobilgeräten sichtbar oder unsichtbar zu machen.

Der Vorteil einer solchen Methode besteht darin, dass Sie ein ähnliches Navigationsmenü zum Ausblenden der Menüs auf Desktop- oder Mobiltelefonen verwenden können.

• Im WordPress-Dashboard
• Gehen Sie zum Aussehen
• Klicken Sie auf die Menüseite
• Drücken Sie die Bildschirmoptionsschaltfläche
• Aktivieren Sie direkt neben den Optionen für „CSS-Klassen“ das Kontrollkästchen.

Scrollen Sie die Seite nach unten, bis Sie den Menüpunkt finden, den Sie ausblenden möchten. In den Menüpunkteinstellungen finden Sie eine Option zum Hinzufügen von CSS-Klassen. Klicken Sie darauf und fügen Sie die CSS-Klasse .hide-mobile hinzu.

Wiederholen Sie diesen Vorgang, um ein mobiles Menü auszublenden.

Sie können jedoch sogar mit der Maus auf Menüelemente klicken, die Sie auf Desktop-Computern unsichtbar machen möchten. Hier müssen Sie .hide-desktop CSS-Klassen hinzufügen.

Speichern Sie nun die Änderungen, indem Sie auf die Schaltfläche „Menü speichern“ klicken.

Um das mobile Menü auszublenden, müssen Sie den benutzerdefinierten CSS-Code hinzufügen. Dafür

• Gehen Sie zum Aussehen
• Klicken Sie auf die Customizer-Seite
• Der Theme Customizer wird gestartet
• Klicken Sie nun auf den zusätzlichen CSS-Tab
• Und fügen Sie den unten angegebenen Code in das CSS-Feld ein

@media (Mindestbreite: 980px){
    .hide-desktop{
    Anzeige: keine !wichtig;
    }
}
    @media (max. Breite: 980px){
    .hide-mobile{
    Anzeige: keine !wichtig;
    }
}

Jetzt können Sie auf Ihrer Website überprüfen, ob das ausgeblendete mobile Menü sichtbar ist oder nicht. Wahrscheinlich werden die mobilen Menüs unsichtbar sein, weil wir die Schritte zum Ausblenden eines mobilen Menüs befolgen.

Fazit:
Wir hoffen, dass die beiden in diesem Blog erwähnten Methoden Ihnen helfen werden, ein mobiles Menü einfach und effizient auszublenden.