• Thema

  • Technologie

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.

Noch mehr finden:

  • Thema

  • Technologie

Beitrag teilen
Share on facebook
Share on twitter
Share on linkedin
Share on whatsapp
Share on email
Share on xing
Was denkst du dazu?
yeah!
0%
wooow
0%
what?
0%
meh.
0%
hahaha
0%
Diskussion

Schreibe einen Kommentar

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

 

Newsletter abonnieren

Noch mehr finden:

  • Thema

  • Technologie