So überlappen Sie die Standard- und die vertikale Navigation auf Ihrer Divi-Website

In diesem Beitrag zeigen wir Ihnen, wie Sie die Standard- und die vertikale Navigation kombinieren können. Genauer; wie Sie das sekundäre Menü und die Fußzeile mit der vertikalen Navigation auf Ihrer Website überlappen lassen. Das bedeutet, dass Sie sich nicht zwischen einer Top-Navigation oder einer vertikalen Navigation entscheiden müssen. du kannst beides machen! Sie können das primäre Menü und das sekundäre Menü in Ihrem Theme Customizer nach Belieben gestalten. Das ist nicht das, was wir Ihnen in diesem Beitrag explizit helfen werden. Wir werden Ihnen vielmehr die folgenden Dinge zeigen, die Ihnen dabei helfen, die folgenden Dinge zu tun:

• So überlappen Sie Ihr sekundäres Menü mit Ihrer vertikalen Navigation
• So fixieren Sie Ihr sekundäres Menü beim Scrollen
• So überlappen Sie Ihre Fußzeile mit Ihrer vertikalen Navigation

Dies sind alles Dinge, die Ihnen helfen, eine gute Balance zwischen der Standard- und der vertikalen Navigation auf Ihrer Website zu schaffen. Indem Sie die Standard- und die vertikale Navigation überlappen, fühlt sich Ihre Website nicht so an, als würde sie von der vertikalen Navigation dominiert. Der Hauptinhalt Ihrer Website passt sich der vertikalen Navigation an, aber das sekundäre Menü und die Fußzeile verhalten sich genauso wie bei deaktivierter vertikaler Navigation.

Ergebnis

Am Ende dieses Tutorials können Sie auf einer Website mit vertikaler Navigation das folgende Ergebnis erzielen:

Die Inspiration für überlappende Standard- und Vertikalnavigation

In einem früheren Beitrag haben wir einige Beispiele für Websites geteilt, die die vertikale Navigation verwenden. Alle Beispiele haben uns gezeigt, wie kreativ man mit einer Divi-Option werden kann, die nicht so oft verwendet wird. Eine durchdachte vertikale Navigation auf Ihrer Website kann die zusätzliche Interaktion ermöglichen, die Sie mit Ihren Besuchern erreichen wollten.

Während wir die Beispiele zeigten, gab es einige Kommentare, die uns inspirierten, Ihnen zu zeigen, wie Sie bestimmte Ergebnisse erzielen können. Dieser Beitrag ist eines dieser inspirierenden Tutorials, die Ihnen zeigen, wie Sie einige Optimierungen an Ihrer Website vornehmen können, ohne selbst nach Lösungen suchen zu müssen.

Wir haben uns von der Alex Brands-Website inspirieren lassen, die das sekundäre Menü oben und die vertikale Navigation links auf der Seite verwendet.

Während des Scrollens scrollt das Sekundärmenü mit. Es verleiht der Website das gewisse Extra und hilft dabei, den Fokus auf den Inhalt im sekundären Menü zu halten. Alex Brands ist eine E-Commerce-Website und das feste Sekundärmenü hilft, die Leute daran zu erinnern, was sich in ihrem Warenkorb befindet und welches Angebot sie anbieten.

Diese Art der vertikalen Navigation ist besonders für E-Commerce-Websites interessant. Die vertikale Navigation erleichtert den Besuchern die Navigation durch die verschiedenen Kategorien von Artikeln, die auf der Website angeboten werden. Es ist einfacher, den Menüpunkten zu folgen, wenn sie sich in einer vertikalen Navigation befinden, da sie einfacher als eine Liste interpretiert werden, die die Leute durchgehen müssen.

So überlappen Sie die Standard- und die vertikale Navigation auf Ihrer Divi-Website

Abonnieren Sie unseren Youtube-Kanal

Allgemeine Schritte

Bevor wir in den Teil eintauchen, in dem wir Ihnen zeigen, wie Sie Ihre Standardnavigation mit Ihrer vertikalen Navigation überlappen können, gehen wir zuerst die allgemeinen Schritte durch. Diese allgemeinen Schritte sind die Grundlage, die Sie durchlaufen müssen, bevor Sie die Überlappung anwenden.

Ohne weitere Fälligkeit; Lass uns anfangen.

Erstellen Sie Ihr Menü und fügen Sie Menüelemente hinzu

Das erste, was Sie tun müssen (falls Sie dies noch nicht getan haben), ist, Ihrer Website ein Menü und die Menüelemente hinzuzufügen. Dies sind die Menüpunkte, die in Ihrer vertikalen Navigation angezeigt werden. Um Ihrer Website ein neues Menü hinzuzufügen, gehen Sie zu Ihrem WordPress-Dashboard > Darstellung > Menüs. Wenn Sie sich auf dieser Seite befinden, geben Sie Ihrem neuen Menü einen Titel und erstellen Sie das Menü.

Fahren Sie fort, indem Sie Menüpunkte hinzufügen und dies zu Ihrem Hauptmenü machen.

Soziale Symbole zum sekundären Menü hinzufügen

Als nächstes müssen Sie Ihr sekundäres Menü aktivieren. Damit das sekundäre Menü auf Ihrer Website angezeigt wird, muss Ihr sekundäres Menü ein aktiviertes Element enthalten. In diesem Beitrag fügen wir nur die Social-Media-Symbole hinzu, aber Sie können natürlich alles hinzufügen, was Sie möchten.

Um das sekundäre Menü zu aktivieren und die sozialen Symbole anzuzeigen, gehen Sie zunächst zu Ihrem WordPress-Dashboard > Anpassen > Kopfzeile & Navigation > Kopfzeilenelemente > Aktivieren Sie die Option "Soziale Symbole anzeigen".

Vertikale Navigation aktivieren

Als nächstes müssen Sie die vertikale Navigation in Ihrem Divi-Builder aktivieren. Gehen Sie dazu zu Ihrem WordPress-Dashboard > Darstellung > Anpassen > Kopfzeile & Navigation > Kopfzeilenformat > Vertikale Navigation aktivieren.

Außerdem können Sie wählen, wo Ihre vertikale Navigation erscheinen soll; auf der linken oder rechten Seite Ihrer Website.

Deaktivieren Sie die feste Navigation für Ihr Hauptmenü

Bevor wir zu den erweiterten Modifikationen übergehen, müssen wir noch etwas tun: Deaktivieren Sie die feste Navigation für Ihr Hauptmenü. Wenn Sie das Hauptmenü bereits deaktiviert haben, überspringen Sie diesen Schritt. Wenn Ihr Hauptmenü jedoch derzeit fest ist, gehen Sie zu Ihrem WordPress-Dashboard> Divi> Themenoptionen> und deaktivieren Sie die feste Navigation.

Kombinieren Sie Standard- und vertikale Navigation

Im nächsten Teil dieses Beitrags zeigen wir Ihnen, wie Sie Ihre Standard- und Vertikalnavigation zu etwas anderem als gewöhnlich machen. Bei der vertikalen Navigation sind wir es gewohnt, dass ein Teil des Bildschirms davon verdeckt wird. Das Sekundärmenü und die Fußzeile passieren standardmäßig nicht die vertikale Navigation.

In einigen Fällen möchten wir jedoch sicherstellen, dass sich die sekundäre Navigation und die Fußzeile über der vertikalen Navigation befinden. Auf diese Weise hängt nur der Hauptinhalt von der vertikalen Navigation ab. Ihre Website wird sich nicht so anfühlen, als wäre sie vollständig in zwei Bereiche geteilt; die vertikale Navigation und den Rest der Website.

CSS-Code zu Theme-Optionen hinzufügen

Sie können den CSS-Code auf zwei Arten hinzufügen: über die Theme-Optionen von Divi oder über den Theme-Anpasser. Um den Code zu den Theme-Optionen hinzuzufügen, gehe zu deinem WordPress-Dashboard > Divi > Theme-Optionen > Allgemein > Scrolle auf der Registerkarte nach unten und füge die folgenden Zeilen des CSS-Codes in das Feld Custom CSS ein:

@media screen and (min-width: 769px) {.et_vertical_nav #top-header, .loaded.et_vertical_nav #top-header {
margin-left: 0 !important; 
z-index: 10000;
position: fixed;
width: 100%;
}
.et_vertical_nav #main-header {
position: absolute;
z-index: 1!important;
overflow: hidden;
}
#et-main-area {
width: auto !important;
}
#main-footer {
margin-left: -225px !important;
left: 0 !important;
z-index: 1000 !important;
position: absolute;
width: 117.4%;
height: auto;
}}

CSS-Code zum Theme-Anpasser hinzufügen

Die andere Möglichkeit besteht darin, die CSS-Codezeilen zum Theme Customizer hinzuzufügen. Gehen Sie dazu zu Ihrem WordPress-Dashboard> Erscheinungsbild> Anpassen> Zusätzliches CSS> und fügen Sie die CSS-Zeilen in das Feld Benutzerdefiniertes CSS ein:

@media screen and (min-width: 769px) {.et_vertical_nav #top-header, .loaded.et_vertical_nav #top-header {
margin-left: 0 !important; 
z-index: 10000;
position: fixed;
width: 100%;
}
.et_vertical_nav #main-header {
position: absolute;
z-index: 1!important;
overflow: hidden;
}
#et-main-area {
width: auto !important;
}
#main-footer {
margin-left: -225px !important;
left: 0 !important;
z-index: 1000 !important;
position: absolute;
width: 117.4%;
height: auto;
}}

Abschließende Gedanken

In diesem Beitrag haben wir Ihnen gezeigt, wie Sie Standard- und Vertikalnavigation auf Ihrer Website kombinieren können. Etwas präziser; Wir haben Ihnen gezeigt, wie Sie das sekundäre Menü und die Fußzeile mit Ihrer vertikalen Navigation überlappen und wie Sie Ihr sekundäres Menü fixieren. Wenn Sie Fragen oder Anregungen haben; Hinterlasse gerne einen Kommentar im Kommentarbereich unten!

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!

Ausgewähltes Bild von Line Design / shutterstock.com