Cassiopeia Hamburger Menü nach oben, Hintergrundfarbe

Hallo,

ich habe 2 Sachen, die ich gerne umsetzen würde.

Das Hamburger Menü konnte ich erfolgreich anhand dieser Anleitung auf die rechte Seite positionieren.

Ist es in der mobilen Version auch möglich, das Menü rechts neben das Logo zu bekommen?

Zudem möchte ich auch gerne für den obigen Bereich auch die Hintergrundfarbe in dem blau darstellen, wie die Farbe des Bannerlogos ist. Ich hatte da jetzt ein, zwei Codes ausprobiert, jedoch ohne Erfolg. Merkwürdigerweise wird die Hintergrundfarbe bei mir nun mit einem Farbverlauf angezeigt, obwohl ich dann den Code auch aus der user.css gelöscht habe.

Danke. Grüße Tino

Dankeschön!

Da ich es in einem anderen Thread, was das dortige Menü betrifft, gesehen habe:

Wie kann das Menü so eingestellt werden, dass die darunterliegenden Modulpositionen sich beim Öffnen des Hamburger Menüs nicht nach unten verschieben und das Menü nur hälftig angezeigt wird.

Grüße Tino

Zitat von drmenzelit

Ich habe für Cassiopeia mal einen Override gemacht: https://www.dr-menzel-it.de/blog/offcanvas…fuer-cassiopeia

Hallo, ich habe das einmal wie in der Anleitung aufgezeigt, angelegt. Leider ist bei mir der Bereich weiß.

Wo steckt da der Fehler?

Und kann man es dann auch so einstellen, dass das Menü auf der rechten Seite ist und dass das Menü - wie auf dieser Seite - sich von rechts einschiebt?

Das steht nun aktuell in der user.css:

/*Header Hintergrund*/
.container-header {
  background-color: #2c4772;
  background-image: none;
}
/*Hamburger Logo nach oben verschieben*/
@media only screen and (max-width: 960px) {
  .grid-child.container-nav {
  margin-top: -80px;
}
}

.offcanvas.show {
    background-color: var(--cassiopeia-color-primary);
    background-image: linear-gradient(135deg,var(--cassiopeia-color-primary),var(--cassiopeia-color-hover));
}
@media (min-width: 992px) {
    .offcanvas-start {
        width: 100%;
    }
}
@media (max-width: 991.98px) {
    .offcanvas .metismenu.mod-menu .metismenu-item > ul {
        position: relative;
        width: 100%;
        margin-top: 1rem;
    }
    .offcanvas .metismenu.mod-menu .mm-collapse {
        background-color: transparent;
    }
    .offcanvas .metismenu.mod-menu .metismenu-item > a {
        color: #fff;
    }
}
.offcanvas-header > *:only-child {
    margin-left: auto;
}

Danke. Grüße Tino

Edit: Jetzt wird es angezeigt.

Wo kann ich bei dem Menü die Hintergrundfarbe ändern, zu #2c4772. Zudem ist dort auch ein Farbverlauf zu sehen.

Und wäre es möglich, das Menü von rechts einschieben zu lassen?

Danke. Grüße Tino

Hallo, Danke.

Das Hamburger Menü verhält sich aktuell so, wenn man es öffnet, ist es ganz kurz weiß und wechselt dann erst in die Farbe in blau.

Zudem öffnet sich das Hamburger Menü bei einer bestimmten Bildschirmgröße auf der linken anstatt auf der rechten Seite.

Wie kann man das ändern?

Grüße Tino

Zitat von drmenzelit

Ändere die Zeile

PHP

<div class="offcanvas offcanvas-start" id="navbar<?php echo $module->id; ?>">

in

PHP

<div class="offcanvas offcanvas-end" id="navbar<?php echo $module->id; ?>">

https://getbootstrap.com/docs/5.3/compo…nvas/#placement

In der user.css? Da finde ich diesen Eintrag nicht.

Zitat von Sieger66

Es genügt bereits in der user.css im bereits vorhandenen Selektor .offcanvas.show { die entsprechende CSS-Eigenschaften abzuändern.

Beachte aber das mit background-color: #2c4772; darin die Unter-Menüeinträge Vorstand und Satzung in Verein den selben Hintergrund erhalten. Daher wohl besser nur ohne Farbverlauf z.B.:

Code

.offcanvas.show {
   background-color: var(--cassiopeia-color-primary);
}

oder beides bereits vorhandenes in der user.css ändern in unterschiedliche Farben z.B. in :

Code

.offcanvas.show {
    background-color:  #2c4772;  
}

@media (max-width: 991.98px) {
 
 .offcanvas .metismenu.mod-menu .mm-collapse {
        background-color:  var(--cassiopeia-color-primary);
    }
}

Hallo, evtl. das letzte Problem. Wo soll das anstatt für welchen Code eingesetzt werden, so dass im Hamburger Menü, die Unterpunkte beim Aufklappen eine andere Hintergrundfarbe (beispielsweise weiß und die Schrift #2c4772 wird), so wie es im normalem Dektop-Modus der Fall ist.

Das ist der aktuelle Code-Auszug.

.offcanvas.show {
  background-color: #2c4772;
  background-image: none;
}
@media (min-width: 992px) {
    .offcanvas-start {
        width: 100%;
    }
}
@media (max-width: 991.98px) {
    .offcanvas .metismenu.mod-menu .metismenu-item > ul {
        position: relative;
        width: 100%;
        margin-top: 1rem;
    }
    .offcanvas .metismenu.mod-menu .mm-collapse {
        background-color: transparent;
    }
    .offcanvas .metismenu.mod-menu .metismenu-item > a {
        color: #fff;
    }
}
.offcanvas-header > *:only-child {
    margin-left: auto;
}

Dankeschön, das sollte es erst einmal hierzu gewesen sein.

Grüße Tino