Horizontal scrollbare Navigation auf Smartphones mit dem Elementor

Smartphone in den Händen

Wenn ein Navigationsmenü viele Einträge hat, ist es mobil manchmal etwas schwierig darzustellen. Dann kann ein scrollbares Menü praktisch sein. Findet auch der Webdesigner vom Spiegel. Dort sieht die Navigation auf Mobiles nämlich so aus:

Diese Navigation lässt sich auch mit dem Elementor bauen in drei einfachen Schritten:

1) Menü nicht zum Hamburger umwandeln auf Mobilgeräten

Im Navigationsmenü-Widget unter Inhalt einstellen, dass das immer noch das ganze Menü angezeigt wird, kein Ausklappmenü.

2) CSS-Klasse vergeben

Damit wir nicht andere Menüs damit beschädigen, empfiehlt es sich unter “Erweitert” eine eigene CSS Klasse einzugeben.

3) Ein wenig CSS

Füge im “Custom CSS”-Feld diesen Code ein. Wenn du eine andere CSS-Klasse verwendet hast, musst du da natürlich deine Klasse einfügen.

@media screen and (max-width: 768px) {
.scrollmenu .elementor-nav-menu--layout-horizontal .elementor-nav-menu {
display: flex;
flex-wrap: nowrap;
white-space: nowrap;
overflow-x: auto;
}
.scrollmenu .elementor-nav-menu--layout-horizontal .elementor-nav-menu::-webkit-scrollbar {
    width: 0px;
    background: transparent; /* make scrollbar transparent */}
}

Und schon ist das Menü fertig.


Keine Beiträge verpassen?


War dieser Artikel hilfreich?
Please wait...
Fragen oder Anregungen?
Zu den Kommentaren ( 0 )
Passende Themen
Kommentare (0)

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.