Collapsible Dropdown (ohne activate)

    Joomla Version
    4.3.3
    PHP Version
    PHP 8.0.x
    Hoster
    WHO

    Hallo zusammen,


    gibt es eine Möglichkeit, im collapsible Dropdown Menü in Cassiopeia den Unterstrich, der das aktive Menü markiert, auszublenden?
    Irgendwie bekomme ich das einfach nicht hin.
    Hier ein Screenshot, wie das aktuell bei mir aussieht:


    Vor allem unterhalb des Pfeils stört der Unterstrich optisch sehr.
    Herzlichen Dank und liebe Grüße! Ruth

    Ah, jetzt ist bei mir der Groschen gefallen. Habe ich im Forum schon mal gesehen:

    Thema
    underline im Menü Cassiopeia entfernen
    moin Gemeinde

    keine Ahnung ob ich gerade ein Brett vorm Kopf habe, aber ich bekomme den Unterstrich im Menü beim hover und active a imCassiopaia pertu nicht weg. Da hat doch sicher von euch schon einer dran gedreht. Ich werd gerade irre mit der line.

    Gruß Micha
    Webworker Berlin


    Denke aber dass es nicht so einfach ist.

    Hallo Dirk,

    mensch klasse, danke Dir! Mit Viviana`s Code bin ich jetzt ein bisschen weiter gekommen, habe mal das in die user.css eingefügt:


    .container-header .metismenu > li.active > a::after,

    .container-header .metismenu > li.active > button::before,

    .container-header .metismenu > li > a:hover::after,

    .container-header .metismenu > li > button:hover::before {

    display:none;

    }


    Zwar noch nicht perfekt, aber es sieh viel angenehmer aus! Danke und liebe Grüße

    Zitat von chr-hl

    ...M.E. muss es

    text-decoration: none;

    heißen...

    Nein das führt nicht zum gewünschten, weil:


    Zitat von drmenzelit

    ...beim Menü in Cassiopeia ist kein text-decoration:underline am Werk, sondern ein befor Pseudo-Element

    Code
    .container-header .metismenu > li.active > a::after,
.container-header .metismenu > li.active > button::before,
.container-header .metismenu > li > a:hover::after,
.container-header .metismenu > li > button:hover::before {
  background: #fff;
  left: 0;
  right: 0;
}

    das generiert die animierte Line bei hover

    Daher ginge bei rusch alternativ z.B. wohl auch:


    Code
    .container-header .metismenu > li.active > a::after,
.container-header .metismenu > li.active > button::before,
.container-header .metismenu > li > a:hover::after,
.container-header .metismenu > li > button:hover::before {
  background: var(--cassiopeia-color-primary) ;   
}