So stimmen Sie Ihre Desktop- und Mobile-Menüleiste mit Divi . ab

Im heutigen Divi-Post geben wir einen kurzen Tipp, der Ihnen hilft, Ihre mobilen Designs zu verbessern. Wir alle wissen, dass Ihr Design auf Mobilgeräten genauso wichtig ist wie auf dem Desktop, aber aufgrund einiger Standardeinstellungen in Divi sehen nicht alle Änderungen, die Sie im Theme Customizer vornehmen, auf dem Desktop genauso aus wie auf dem Mobilgerät.

In diesem Beitrag zeigen wir Ihnen insbesondere, wie Sie eine kleinere mobile Menüleiste erstellen, die bei Verwendung der maximalen Logohöhe und der minimalen Menühöhe genauso aussieht wie die Menüleiste auf dem Desktop. Standardmäßig unterscheiden sich die Ansichten auf Mobilgeräten und Desktops. Nur weil Sie eine bestimmte Menühöhe und maximale Logohöhe festgelegt haben, bedeutet dies nicht, dass dies auch für Mobilgeräte gilt.

Der Unterschied für Mobilgeräte und Desktops

Es gibt viele Websites, die sich bewusst für eine primäre Menüleiste mit nicht so großer Höhe entscheiden. Es sieht einfach eleganter aus und nimmt weniger Platz ein, was auf jeden Fall interessant ist, wenn Sie auch eine feste Navigation verwenden.

Wenn Sie in Ihrem Theme Customizer den höchsten Wert für die Logo Max Height (der 100 ist) und den niedrigsten Wert für die Menu Height (der 30 ist) wählen, erhalten Sie auf dem Desktop das folgende Ergebnis:

Die Proportionen des Logos und der Menühöhe sind jedoch für Mobilgeräte unterschiedlich. Wenn Sie den höchsten Wert für die Logo-Max-Höhe und den niedrigsten Wert für die Menühöhe ausgewählt haben, erhalten Sie nicht das gleiche Ergebnis wie auf dem Desktop. Das Ergebnis, das Sie erhalten, sieht stattdessen so aus:

Ergebnis

Jetzt zeigen wir Ihnen, wie Sie dasselbe Layout für Ihre mobile Menüleiste anwenden. Das bedeutet, dass das Logo seine maximale Höhe im Menü hat. Außerdem wird die Menüleiste selbst viel kleiner sein. Schließlich haben Sie mehr Platz auf dem Bildschirm, damit der Inhalt Ihrer Seite angezeigt wird.

Nachdem Sie dieses Tutorial Schritt für Schritt befolgt haben, erreichen Sie folgendes Ergebnis:

Was offensichtlich eher der Desktop-Version ähnelt:

So stimmen Sie Ihre Desktop- und Mobile-Menüleiste mit Divi . ab

Abonnieren Sie unseren Youtube-Kanal

Einstellungen der primären Menüleiste

Als erstes nehmen wir die erforderlichen Änderungen an der primären Menüleiste im Theme Customizer vor. Wenn Sie sich in Ihrem WordPress-Dashboard befinden, gehen Sie zu Darstellung > Anpassen > Kopfzeile & Navigation > Primäre Menüleiste und stellen Sie sicher, dass die folgenden Einstellungen gelten:

• Logobild ausblenden: Deaktivieren
• Menühöhe: 30
• Max. Höhe des Logos: 100

Mobile Menüleiste Zusätzlicher CSS-Code

Als nächstes müssen wir zusätzlichen CSS-Code hinzufügen, damit die mobile Menüleiste genauso aussieht wie die Menüleiste auf dem Desktop. Wir können den CSS-Code auf einer bestimmten Seite (wenn wir das Menü nur auf bestimmten Seiten so anzeigen möchten) oder auf der gesamten Website hinzufügen. Normalerweise wenden Sie den CSS-Code auf die gesamte Website an, um die erforderliche Konsistenz auf Ihrer Website zu gewährleisten, aber das liegt an Ihnen.

CSS-Code insbesondere zu einer Seite hinzufügen

Um den CSS-Code insbesondere zu einer Seite hinzuzufügen, müssen Sie die Seite in Ihrem WordPress-Dashboard öffnen. Während Sie den Divi-Builder verwenden, müssen Sie auf das folgende Symbol darin klicken:

Als Nächstes können Sie die folgenden CSS-Codezeilen in das Feld Benutzerdefiniertes CSS einfügen:

@media (max-width: 980px) {
#page-container {
padding-top: 43px !important;
} 
}
@media (max-width: 980px) {
#logo {
max-width: 100% !important;
max-height: 90% !important;
}
}
@media (max-width: 980px) {
#mainheader {
top: 4% !important;
}
}
@media (max-width: 980px) {
#et-top-navigation{
padding-top: 5px !important;
}}
.et_header_style_split .mobile_menu_bar,
.et_header_style_left .mobile_menu_bar {
padding-bottom: 5px;
}

CSS-Code zur gesamten Website hinzufügen

Die andere Möglichkeit, die wahrscheinlich am häufigsten verwendet wird, ist das Hinzufügen des Codes zu Ihrer gesamten Website. Dazu gibt es zwei Möglichkeiten.

Über den Theme Customizer

Die erste Methode besteht darin, den CSS-Code zu Ihrem Theme Customizer hinzuzufügen. Gehen Sie dazu zu Ihrem WordPress-Dashboard > Erscheinungsbild > Anpassen > Zusätzliches CSS > Fügen Sie die folgenden CSS-Codezeilen in das Feld Benutzerdefiniertes CSS ein:

@media (max-width: 980px) {
#page-container {
padding-top: 43px !important;
} 
}
@media (max-width: 980px) {
#logo {
max-width: 100% !important;
max-height: 90% !important;
}
}
@media (max-width: 980px) {
#mainheader {
top: 4% !important;
}
}
@media (max-width: 980px) {
#et-top-navigation{
padding-top: 5px !important;
}}
.et_header_style_split .mobile_menu_bar,
.et_header_style_left .mobile_menu_bar {
padding-bottom: 5px;
}

Mit dieser Option können Sie die Änderungen in Echtzeit sehen. Dies ist wahrscheinlich die interessanteste Wahl, wenn Sie einige Dinge im Code ändern und sehen möchten, wie er aussieht, bevor Sie die Änderungen speichern.

Durch die Theme-Optionen

Die zweite Methode besteht darin, den CSS-Code zu den Theme-Optionen hinzuzufügen. Gehen Sie dazu zu Ihrem WordPress-Dashboard > Divi > Theme-Optionen > Scrollen Sie auf der Registerkarte Allgemein nach unten und fügen Sie den folgenden CSS-Code in das Feld Benutzerdefiniertes CSS ein:

@media (max-width: 980px) {
#page-container {
padding-top: 43px !important;
} 
}
@media (max-width: 980px) {
#logo {
max-width: 100% !important;
max-height: 90% !important;
}
}
@media (max-width: 980px) {
#mainheader {
top: 4% !important;
}
}
@media (max-width: 980px) {
#et-top-navigation{
padding-top: 5px !important;
}}
.et_header_style_split .mobile_menu_bar,
.et_header_style_left .mobile_menu_bar {
padding-bottom: 5px;
}

Ändern Sie den Code nach Ihren eigenen Vorlieben

Natürlich ist dies nicht die einzige Möglichkeit, die mobile Menüleiste so aussehen zu lassen. Wenn Sie im Theme Customizer andere Einstellungen auf Ihre primäre Menüleiste anwenden, müssen Sie die Änderungen wahrscheinlich auch im CSS-Code vornehmen. Die von Ihnen verwendeten CSS-Klassen und CSS-IDs sind jedoch identisch.

Eines der Dinge, die Sie jedoch auf jeden Fall berücksichtigen müssen, ist die obere Auffüllung des Seitencontainers. Der Wert, den wir in unserem CSS-Code zugewiesen haben, stimmt mit den anderen Änderungen überein, die wir vorgenommen haben. Wenn Sie jedoch die Werte in den anderen Klassen ändern, müssen Sie sicherstellen, dass die obere Auffüllung korrekt bleibt. Der einfachste Weg, dies zu tun, besteht darin, mit einem höheren Wert zu beginnen und den Wert zu ändern, bis Sie beobachten, wie der Seitencontainer einrastet.

Ergebnis

Wenn Sie dieses Tutorial Schritt für Schritt befolgt haben, sollten Sie für Ihre mobile Menüleiste folgendes Ergebnis erzielen können:

Das sieht fast genauso aus wie das Ergebnis, das Sie auf Desktops erhalten:

Bevor Sie CSS-Änderungen vornehmen, sieht das Ergebnis auf Mobile so aus:

Abschließende Gedanken

In diesem Beitrag haben wir Ihnen gezeigt, wie Sie Ihre mobile Menüleiste verkleinern und an die Menüleiste auf Desktops anpassen können. Sie können den benötigten CSS-Code einfach zu einer bestimmten Seite oder der gesamten Website hinzufügen, damit diese Methode funktioniert. Wenn Sie Fragen oder Anregungen haben; Stellen Sie sicher, dass Sie einen Kommentar im Kommentarbereich unten hinterlassen!

Abonnieren Sie unbedingt unseren E-Mail-Newsletter und unseren YouTube-Kanal, damit Sie keine große Ankündigung, keinen nützlichen Tipp oder ein Divi-Werbegeschenk verpassen!