Reparieren Ihres responsiven Navigationsmenüs in Divi
Veröffentlicht: 2017-08-01Es kann schwierig sein, ein ansprechendes Navigationsmenü zu erstellen, das auf allen Bildschirmgrößen gut aussieht. Ich wünschte, es wäre nicht so wichtig, aber da sich die Navigation normalerweise oben auf jeder Seite Ihrer Website befindet, ist sie auf jeder Seite zuerst sichtbar. Es ist also wichtig, es richtig zu machen. Zum Glück können Sie mit dem Theme-Anpasser von Divi das Hauptmenü mit einigen ziemlich coolen Header-Optionen anpassen. Aber beim Standardmenüstil mit dem Logo links und den Menülinks rechts können die Dinge auf kleineren Bildschirmgrößen leicht durcheinander geraten, insbesondere wenn zu viele Links die Kopfzeile überfüllen. Ich weiß, bei mir passiert viel. Ich sehe das Menü genau richtig für den Desktop und dann überprüfen Sie es auf einem Tablet (insbesondere einem iPad Pro) und das Logo überlappt das Menü und einige der Links sind eine Zeile nach unten gesprungen.
Heute werde ich Ihnen einige hilfreiche Lösungen für diese überfüllten Navigationsmenüs geben, damit sie auch auf diesen nicht so gebräuchlichen Bildschirmgrößen gut aussehen. Schließlich hängt zumindest für einige Benutzer die Glaubwürdigkeit Ihrer Website davon ab.
Lass uns anfangen.
Reparieren Ihres responsiven Navigationsmenüs in Divi
Abonnieren Sie unseren Youtube-Kanal
Vier Lösungen für ein überfülltes Navigationsmenü
Eine der großartigen Eigenschaften von Divi ist, dass es auf einem fließenden Raster-Layout basiert, das Medienabfragen (aufgeteiltes CSS) verwendet, um den Stil Ihrer Website an unterschiedliche Bildschirmgrößen anzupassen. Der Punkt, an dem diese Anpassungen vorgenommen werden, nennen wir Breakpoints. Wenn Sie Ihr Hauptnavigationsmenü auf ALLEN Bildschirmgrößen perfektionieren möchten, müssen Sie wahrscheinlich Ihr Menü mithilfe von Medienabfragen anpassen und bestimmte Haltepunkte anpassen.
Das Problem
Das häufigste Problem, auf das ich bei der Verwendung des Standardnavigationsmenüs von Divi stoße, ist, wenn ein Kunde viele Menüelemente auf oberster Ebene möchte. Wenn Sie mehr als 5 Menüpunkte (oder Menüpunkte mit großer Schriftgröße) im Hauptnavigationsmenü haben, werden oft ein Zeilenumbruch und ein vergrößertes Logo erzeugt, wenn die Bildschirmgröße eine Breite zwischen 980-1100 Pixel (die Größe kleiner Laptops) erreicht und große Tabletten). Ich bin mir sicher, dass Sie dieses Problem schon einmal hatten, auch wenn Sie es nie bemerkt haben. Es sieht ungefähr so aus:
Nicht ideal. Schauen wir uns also vier Lösungen für dieses Problem an.
Lösung #1: Machen Sie die Menüleiste auf volle Breite
Normalerweise würde ich nicht vorschlagen, Ihr Navigationsmenü in voller Breite zu erstellen, es sei denn, ich würde den Rest meiner Website ebenfalls in voller Breite erstellen. Ich denke, die Konsistenz im Design ist wichtig. Aber manchmal ist es ein guter Kompromiss, wenn Ihr Navigationsmenü auf allen Geräten gut aussieht. Und es ist auch eine einfache Lösung.
Gehen Sie zu Theme Customizer > Header & Navigation > Primary Menu Bar und wählen Sie Make Full Width .
Lösung #2: Passen Sie die Einstellungen für Logo und Schriftart an.
Eine andere einfache Lösung für Ihr Problem besteht darin, die Einstellungen des Theme-Anpassers zu verwenden, um die Standardoptionen für die maximale Höhe des Logos, die Textgröße oder die Schriftart anzupassen.
Seien Sie beim Anpassen dieser Optionen vorsichtig, da Sie niemals das Design und die Lesbarkeit Ihres Logos oder Ihrer Menüelemente beeinträchtigen möchten, um eine einfache Korrektur zu ermöglichen.
Lösung 3: Anzeigen des mobilen Menüs an einem neuen Haltepunkt.
Hier sind die allgemeinen Bereiche für jeden der Breakpoints in Divi:
Großer Desktop: 1405px und höher
Standard-Desktop: zwischen 1100px und 1405px
Laptops und große Tablets: zwischen 980px und 1100px
Tablets: zwischen 768px und 980px
Smartphones und kleine Tablets: zwischen 320px und 768px;
Smartphones: zwischen 320px und 480px;
Der Haltepunkt, an dem das Standardnavigationsmenü in das mobile Menü (mit dem Hamburger-Navigationsgerät) umgewandelt wird, beträgt 980px. Bei einer Bildschirmgröße von weniger als 980px wird das mobile Menü angezeigt.
Wenn Sie jedoch seltsame Menüzeilenumbrüche vermeiden möchten, ändern Sie den Breakpoint auf einen anderen Wert. Angenommen, Sie möchten das mobile Menü mit etwa 1024 px statt 980 px anzeigen. Dazu müssen Sie benutzerdefiniertes CSS in eine Medienabfrage einfügen, um das Standard-Stil in Divi zu überschreiben.
Gehen Sie zu Theme Customizer > Additional CSS und geben Sie Folgendes ein:
@media (max-width: 1024px) {
#et_mobile_nav_menu {
display: block;
}
#top-menu {
display: none;
}
}
Diese Medienabfrage bewirkt zwei Dinge. Es blendet das normale Menü aus und zeigt das mobile Menü am 1024px-Haltepunkt an.
Lösung 4: Anpassen des Menüstils an einem bestimmten Haltepunkt
Diese Lösung ist wahrscheinlich die beste Option, da Sie an bestimmten Haltepunkten die meiste Kontrolle über Ihr Menü haben. Sie können Ihre Menüelemente gezielt ansprechen, indem Sie deren CSS-Klasse verwenden, um benutzerdefiniertes Styling in Ihrer Medienabfrage zu erstellen.
Hier ist Divis Standard-CSS für Ihre Menüelemente:
#top-menu li {
display: inline-block;
padding-right: 22px;
font-size: 14px;
}
Angenommen, Sie möchten, dass die Schriftgröße Ihres Menüs standardmäßig 18px beträgt, aber Sie möchten, dass sie an einem bestimmten Haltepunkt auf 14px geändert wird. Und um noch mehr Platz zu sparen, könnten Sie das Padding auf 15px statt 22px reduzieren. Sie können dies tun, indem Sie die CSS-Klasse für alle Menüpunkte ansprechen und eine Medienabfrage erstellen
Gehen Sie zu Theme Customizer > Additional CSS und geben Sie Folgendes ein:
@media (max-width: 1200px) {
#top-menu li, #top-menu li a {
font-size: 14px;
padding-right: 15px;
}
}
Was dieses CSS tut, ist die Schriftgröße auf 14px und die rechte Auffüllung auf 15px auf jedem Bildschirm von 1200px oder darunter zu ändern. Dies schafft einen reibungslosen Übergang beim Anpassen der Bildschirmgröße auf dem Desktop und ermöglicht es Ihnen, Ihre Standardnavigation auf großen Tablets und kleinen Laptops beizubehalten.
Anpassen anderer Kopfzeilenstile
In Divis Theme Customizer stehen fünf Header-Stile zur Auswahl (vertikale Navigation nicht mitgerechnet). Zu den fünf Stilen gehören Standard (der bereits in diesem Beitrag angesprochen wurde), Slide-in, Fullscreen, Centered und Centered Inline Logo.
Slide-In- und Vollbild-Stile
Wenn Ihr Website-Design entweder den Slide-In- oder den Vollbild-Stil erfordert, ist Ihr responsives Menü ziemlich narrensicher, da das mobile Navigations-Hamburger-Symbol verwendet wird, um das Menü auf allen Bildschirmgrößen auszulösen.
Zentrierter Stil
Wenn Sie den zentrierten Stil verwenden, haben Sie mehr Platz für Ihre Menüelemente zum Atmen, aber wenn Sie noch etwas mehr Platz benötigen, können Sie dieselben benutzerdefinierten Lösungen verwenden, die wir für den Standardstil verwendet haben, um es so aussehen zu lassen, wie Sie es möchten.
Zentrierter Inline-Logo-Stil
Schließlich ist der zentrierte Inline-Logo-Stil-Header von Anfang an etwas schwierig zu finden. Sie müssen ein paar Dinge richtig machen, wenn Sie möchten, dass das Logo auf der Seite zentriert wird. Zuerst müssen Sie eine gerade Anzahl von Menüpunkten haben, damit das mittlere Logo das Herzstück bleibt.
Zweitens bestimmt die Textmenge, die Sie für jeden Menüpunkt verwenden, den Mittelpunkt des Logos. Wenn Sie mehr Text auf einer Seite haben, wird das Logo etwas abgesetzt. Dies ist in den meisten Situationen keine große Sache, aber wenn Sie eine Kopfzeile mit zentrierten Elementen direkt unter dem Logo haben, kann dies ein offensichtliches Problem sein, das Sie beheben müssen.
Beachten Sie, dass das Logo im Menü im Vergleich zum zentrierten Logo im Kopfbereich ein wenig außermittig ist.
Nun kürze ich die Menüpunktbezeichnung „Informationselemente“ auf „Information“. Sehen Sie sich nun an, wie sich das Logo mehr in die Mitte verschiebt.
Diese Lösung kann alles sein, was Sie brauchen, um das Logo dorthin zu bringen, wo Sie es haben möchten. Möglicherweise können Sie etwas wie "Über uns" in "Über uns" oder umgekehrt ändern, um diese kleinen Anpassungen vorzunehmen.
Aber das kann ein wenig frustrierend werden, wenn Sie ein Perfektionist sind (ich kann meine Momente haben. Glauben Sie mir.) Es gibt also eine tiefere Ebene der Anpassung, die Sie vornehmen können, wenn Sie noch mehr Anpassungen vornehmen möchten. Anstatt den eigentlichen Text im Menüelement anzupassen, um den Mittelpunkt des Logos anzupassen, können Sie jedem Element eine benutzerdefinierte CSS-Klasse hinzufügen und es nach rechts oder links auffüllen. Dies sollte Ihnen den letzten Schubs geben, den Sie brauchen, um alles in die Mitte zu bekommen.
Gehen Sie im WordPress-Dashboard zu Darstellung > Menüs und stellen Sie sicher, dass CSS-Klassen im Bereich Bildschirmoptionen aktiviert sind.
Öffnen Sie dann den Menüpunkt, den Sie ansprechen möchten. Geben Sie dann eine CSS-Klasse in das Eingabefeld CSS-Klassen ein. Ich nenne meinen "Stupser".
Gehen Sie danach zu Divi > Theme Customizer > Additional CSS und fügen Sie das folgende benutzerdefinierte CSS hinzu:
#top-menu li.nudge {
padding-right: 32px;
}
Bei diesem CSS erhält nur das Item mit der Klasse „nudge“ eine rechte Auffüllung von 32px; Das schiebt das Logo gerade genug über, um es zu zentrieren.
Das ist es!
Schlussgedanken
Mit Divi macht das Erstellen von Websites Spaß und ist einfach. Aber manchmal verlangen die Anforderungen des Jobs (und unserer Kunden) von uns, die Extrameile zu gehen, um sicherzustellen, dass unsere Standorte herausragend sind. Und was gute Websites von großartigen Websites unterscheidet, sind die kleinen Details. Die Leistung Ihres reaktionsschnellen Navigationsmenüs ist eines der wichtigen Details, die Sie richtig machen möchten. Meistens ist es das Erste, was Ihre Benutzer auf jeder Seite Ihrer Website sehen und mit dem sie interagieren. Eine kaputt aussehende Speisekarte kann einen schlechten ersten Eindruck hinterlassen. Ich hoffe, dieser Beitrag wird Ihnen helfen, Sie in die richtige Richtung zu „schubsen“ (sorry, ich konnte mir nicht helfen :)).
Ich bin mir sicher, dass es noch mehr Probleme und Lösungen gibt, die ich in diesem Beitrag nicht angesprochen habe. Postet sie gerne in die Kommentare. Ich freue mich darauf, von dir zu hören.
Danke schön!