Cassiopeia Hamburger Menü rechts statt links positionieren?

Norbert.R · 23. Februar 2024

Hallo in die Runde,

weiß jemand auf die Schnelle, wie man im Cassiopeia Template das Hamburgermenü in der mobilen Ansicht rechts statt links positioniert?

Ich weiß, das sind Basics aber ich finde in Google nix dazu und die Klasse ist im Debugger (Browser Entwicklerwerkzeuge) nicht ersichtlich.

Eventuell hat wer ein CSS Schnipsel für die user.css zur Hand.

Danke.

Gruß Norbert

christine2 · 23. Februar 2024

Hallo,

Probier es damit (zumindest temporär tät es passen):

Code

.container-header .container-nav {
justify-content: right;
}

Liebe Grüße

Christine

Edit: Wahrscheinlich muss man da (noch) media queries einbauen.

Edit2: Ja, so ca:

Code

@media only screen and (max-width:500px) {
.container-header .container-nav {
justify-content: right;
 }}

Norbert.R · 23. Februar 2024

OK, dann muss ich noch das Menü andersrum hinbringen...

Danke!

Stef · 23. Februar 2024

Der von dir angegebenen Link zur Webseite im #1 ist nicht richtig.

Norbert.R · 23. Februar 2024

Hallo,

ja, habs auf ner Testseite erst mal umgesetzt.

Sorry.

christine2 · 23. Februar 2024

zu #3, eventuell damit:

Code

ul.mod-menu.mod-menu_dropdown-metismenu.metismenu.mod-list li {
justify-content: right;  
}

nav.navbar.navbar-expand-lg {
justify-content: right;    
}

Liebe Grüße

Christine

Norbert.R · 23. Februar 2024

Hallo Christine,

herzlichen Dank.

Macht genau das was es soll jetzt!

Der ganze CSS Code:

/* Hamburger-Menü auf die rechte Seite! */

@media only screen and (max-width:992px) {

.container-header .container-nav {

justify-content: right;

}

ul.mod-menu.mod-menu_dropdown-metismenu.metismenu.mod-list li {

justify-content: right;

}

nav.navbar.navbar-expand-lg {

justify-content: right;

}

Gruß Norbert

Sieger66 · 23. Februar 2024

Eventuell nützlich damit das Hamburger-Menü nicht bei verschiedenen Bildschirmgrößen bzw. Bildschirmauflösungen mal recht und mal Links erscheint:

Code

nav.navbar.navbar-expand-lg,
nav.navbar.navbar-expand-md
{
justify-content: right;    
}

Dies wurde aber wohl inzwischen auch schon auf andere weise gelöst...

Norbert.R · 26. Februar 2024

Ich danke nochmals allen Helfern, insbesondere Christine!

Hab meine 2 Seiten umgestellt und das Feedback ist positiv, da die meisten User am Smartphone den rechten Daumen einsetzen und so das Menü besser erreichbar ist.