So erstellen Sie eine Website oder ein Blog im Jahr 2020 - Kostenlose und einfache Anleitung zum Erstellen einer Website

So verstecken Sie ein mobiles MenĂŒ in WordPress (AnfĂ€ngerleitfaden)

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.

Blenden Sie ein WordPress-MenĂŒ auf MobilgerĂ€ten aus

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.

Erstellen Sie ein neues MenĂŒ zur Verwendung auf MobilgerĂ€ten.

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.

MenĂŒpunkte hinzufĂŒgen

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 das mobile MenĂŒ und Ihre Adresse

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.

Mobiles ThemenmenĂŒ in WordPress ausblenden

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ĂŒ).

MenĂŒposition

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.

Mobiles MenĂŒ ersetzt

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.

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.

Quellcode beim Anzeigen Ihres Desktop-MenĂŒs

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.

Bezeichner fĂŒr mobile MenĂŒs

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.

FĂŒgen Sie benutzerdefiniertes CSS hinzu, um das vollstĂ€ndige MenĂŒ auszublenden

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.

Anzeigeoptionen

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.

CSS-Klasse hinzufĂŒgen

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;
    }

}

FĂŒgen Sie Ihr benutzerdefiniertes CSS hinzu

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.

Verschiedene MenĂŒs auf Desktop- und mobilen Bildschirmen.

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.