kleine css-Hilfe: Cassiopeia > HH-Menü rechts

hey,

ich wollte ganz einfach diese "Hamburger-Menü"-Choose
nicht links sondern rechts haben und
sie soll den Content nicht verschieben sondern drübergleiten.

das kann doch nicht so schwer sein? Ich brösele da schon einen Tag dran rum, mit diversen Versuchen in der user.css unter @media (max-width: 993px) { ... }
es passt rechts nicht so sauber wie links.
Hat das von euch schon Mal jemand gemacht o. versucht?
Was gibt es da für Kern- o. Knackpunkte?

Dank für Tipps & Hilfe,
lG. eli

vielen Dank! Das ging ja schnell

die dort aufgeführten Tipps funktionieren gut,
mein wesentliche css hier anhängig.
Wegen "flex" ist es etwas verändert.

Kleine Hinken sind noch da:

auf PC ist
das Menü oben zentriert in einer Reihe und endet mit dem Suchfeld & button
in der mobilen Version ist
das HH-Menü rechts oben und darunter Suchfeld & button

Wenn ich die Seite neu lade, switched die Sucheinheit immer kurz auf das Hamburger. Das sieht blöd aus.

Beim Öffnen des HH rechts oben, schieben die Menüpunkte die Sucheinheit nach unten: prima. Wenn ich Unterpunkte öffne, schieben die sich allerdings über die Sucheinheit. mmpf!

Bei einem langen Unterpunktnamen liegt der Öffnen-button nicht mehr rechts, sondern direkt rechts unter dem Wort in ner "2. Zeile"

(aber im Ganzen gehts erstmal)

lG. eli

/*   forum.joomla: ------------- sprung zwischen 767 und 768 */
@media (max-width: 993px) {  
 header .navbar-brand {
   left: 10px;
   bottom: 10px;
 }
 .container-header .navbar-toggler {  
   background-color: black;   
 } 
 .grid-child.container-nav { 
   flex-direction: column;
    align-items: end;          /*  rechtsbündig  */
 }

.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;    
} 
.navbar-toggler {
 width:51px;
}
.container-header .container-nav nav, .container-header, .container-nav, .container-search {
    margin-top: 0em;
}
}

@media (width <= 767.98px) {  
.container-header .container-nav .container-search { 
 margin-top: 0em;  }
}