- Schwierigkeitsgrad: leicht
- Umsetzungsdauer: 10 Minuten
In diesem Schritt wird das Navigations-Menü responsive. Das heißt auch auf der Tablet und Smartphone Version, wird das Menü als Dropdown (Ausklappbares Fenster) aufgebaut.
Gehe nun in das Dashboard deiner Homepage
http://ihre-domain.de/wp-admin
Gehe im Dashboard links auf „Plugins“ -> oben auf „Installieren“ –> und dann rechts in der Suche „responsive menu“ eingeben.
Jetzt siehst du oben in der Mitte das Plugin „Responsive Menu – Erstelle Mobile Naviagtion“, klicke auf „installieren“ und dann auf „aktivieren“
In der Menüleiste links im Dashboard gibt es jetzt einen neuen Punkt der „Mobile Menu Options“ heißt, da musst du jetzt raufklicken.
Hier sehen wir das Bearbeitungsfenster von dem Plugin, es sieht erstmal sehr verwirrend aus, aber ich zeige dir genau welche Einstellungen du wo vornehmen musst.
Breakpoint
Gebe nun bei Breakpoint „1200“ ein. Damit wird vorgeben, ab wie viel Pixel das Menü zu einem mobilen Menü werden soll
Original Menu to Hide
Gebe da foldenden Code ein: „.site-navigation ul.menu { display: none}“
Damit wird das Desktop Menü deaktiviert, damit nicht zwei Menüs angezeigt werden.
Jetzt haben wir ein sogenanntes „Hamburger-Menü“ (Wegen den 3 Strichen, erinnert es wohl an einen Hamburger, oben unten das Brot und in der Mitte das Fleisch.)
Nun wollen wir aber noch die Farben ändern.
Klicke oben in der Menüleiste von dem Plugin Dashboard auf „Button“
Scrolle jetzt nach unten bis zur Box „Container Background“ hier kannst du die Farben von dem Hamburger Menü Button ändern. (Die 3 Striche)
Color -> das ist die Standartfarbe
Hover Color -> Die Farbe die aktiviert wird, wenn man mit der Maus rüberfährt
Active Color – > Die Farbe die aktiviert wird, wenn man auf den Button geklickt hat
Stelle hier deine Wunschfarben ein und schaue dir an was dir am besten gefällt.
Gehe jetzt auf „Container“
Hier kannst du als erstes das Suchfeld in der Mobilen Menüleiste deaktivieren. Dafür klicke bei „Search“ auf das „Grüne ON“ damit stellst du dies aus.
Bei der Box „Sizing“ kannst du bei „Widht“ die Prozent angeben, wie breit das Mobile Menü ausklappen soll.
Du kannst die Einstellung hier alle so lassen.
Wenn du weiter nach unten scrollst kommen folgende Möglichkeiten:
In der Box „Background“ kannst du die Hintergrundfarbe von dem ausgeklappten Menü einstellen.
Diese habe ich bei „Container Color“ und „Inner Container Color“ auf „#ffffff“ (weiß) gestellt.
Wenn du Einstellung vorgenommen hast, dann musst du noch unten auf „update options“ klicken, damit werden die Einstellungen gespeichert.
Gehe jetzt auf „Menu“
Scrolle nun bis zur Box „Item Background“ da kannst du die Hintergrundfarbe umstellen.
Unser Menu sieht jetzt wie folgt aus.
Es gibt bei dem Plugin wirklich unzählige Einstellmöglichkeiten, das beste ist, dass du einfach mal zwei Farben änderst und dann gleich schaust wie sieht es aus. Damit kannst du dich langsam an dein perfektes mobiles Menü annähern.
Möchtest du noch unter den aufgeklappten Menü Text oder Links einfügen? Siehe Bild.
Dann gehe dafür auf „Container“
Scrolle jetzt ziemlich weit nach unten bis zur Box „Additional Content“.
Nun kopiere folgenden Text/ Code und füge in in Box ein.
© 2020 | Fahrschule Maasen in Berlin Spandau<br><br><a href=“/impressum“>Impressum</a> | <a href=“/datenschutz“>Datenschutz</a>
Tausche den Text gegen deinen aus.
Bei Color kannst du noch die Farbe vom Copyright ändern. Die Farbe der Links wird direkt von den übergeordneten Einstellungen übernommen und kann hier nicht geändert werden.
Und fertig ist dein Mobiles Menü.
Live Support
- Erreichbar: von 8:00 - 18:00 Uhr
- Durchschnittliche Antwortzeit: 13 Minuten