Dropdown Menu wird von OSM Modul verdeckt

    Joomla Version
    5.0.1
    PHP Version
    PHP 8.1.x
    Hoster
    cloudaccess
    Link (URL) zur Seite mit dem Problem
    https://balance.joomla.com/termine

    Vielen Dank schonmal für alle eure Beiträge in diesem Forum, das hat mir bis hierhin sehr geholfen.


    Jetzt komme ich allerdings ohne eure direkte Hilfe nicht mehr weiter:


    Auf der Seite "Termine" wird das Dropdown Menu von "Kurse" von dem Modul OSM überdeckt. Was muss ich da tun damit das Menu immer auf oberster Ebene steht?


    Und eine weitere Frage zum Menu, wie bekomme ich den selben schönen Effekt mit dem Mauszeiger über dem Punkt "Kurse" hin? Ebenso sollte wenn "Kurse" aufklappt, das Feld nicht weis sondern grün wie der Header sein. Dass die Menupunkte in der 2. Ebene heller erscheinen funktioniert schon mal :)


    LG

    Patrick

    Zur ersten Frage: Packe mal das in Deine user.css:

    Code
    .osmodul {
    z-index: 0;
}

    Bei der zweiten Frage bin ich mir nicht ganz sicher, aber Du könntest es mal hiermit versuchen:

    Code
    .mod-menu__heading.nav-header.mm-toggler.mm-toggler-nolink.mm-collapsed:hover {
    background-color: rgb(201,222,188);
    border-radius: 6px;
    padding-left: 10px;
    padding-right: 10px;
}

    Hallo Patrick,


    Den 2. Code von #2 habe ich noch nicht ausprobiert. Dafür den 1. Code von Dautrich.


    Aber: Dieser funktioniert nur dann, wenn er am Anfang der user.css reingegeben wird.
    Am Ende der user.css nicht, weil:

    Code
    @media (max-width: 992px) {
    nav.navbar {order: -1;}

    derzeit Zeile 47, die 2. schließende Klammer fehlt, also:

    Code
    @media (max-width: 992px) {
    nav.navbar {order: -1;}}

    sonst zeigen nachfolgende Codes keine Wirkung (ab Zeile 48).


    Liebe Grüße
    Christine

    Da in der user.css in Zeile 39-44 die Logo-Position #mod-custom125 schon festgelegt wird fehlt die schließende Klammer

    }

    eigentlich wohl nicht in der derzeitigen Zeile 47 sondern fehlt sie am Ende der derzeitigen user.css Datei bzw. Zeile 53 }}

    Sieger66

    Hatte gelöscht. Doch nochmals gecheckt:

    Wenn Du die 2. Klammer in Zeile 53 gibst, funktioniert zwar der 1. Code, das stimmt.


    Will man aber bei: #mod-custom125 irgendwas mal ändern, funktioniert das nicht. Deswegen meine ich: Zeile 47


    Liebe Grüße

    Christine

    Wenn die fehlende schließende Klammer am ende der derzeitigen Datei eingefügt wird,

    wirkt der untere Sektor #mod-custom125 in Zeile 48 wegen der Zeile 46 @media (max-width: 992px) {

    nur wenn der viewport kleiner 993 Pixel ist.

    Dies hat christine2 eventuell übersehen.


    Mögliche identische Eigenschaften innerhalb des Regelsatzes beim oberen Selektor #mod-custom125 in Zeile 39 bis 44 wirken dann natürlich nur noch wenn der viewport größer als 992 Pixel ist.

    @christine2 @Sieger66

    ohhhjaaaa, ich hab die } am Ende vergessen, so oft gelesen und am Ende trotzdem versaut...

    --> Mit der @Media wollte ich im Header das Logo (mod-custom125) für die Mobile Ansicht optimieren.


    @Dautrich:


    1. Tipp zum Menu hat super funktioniert, vielen Dank!!!


    zu meiner 2. Frage: "Kurse" wir jetzt mit der Maus markiert, allerdings verschiebt sich dann das Menu nach links...?

    ...und der weise Hintergrund ist leider auch noch da.


    Dafür bitte noch einen Hinweis :saint:

    ...und womit klappt das dropdown auf ohne mit der Maus zu klicken?

    Einmal editiert, zuletzt von Indigo66 () aus folgendem Grund: Ein Beitrag von elbarto mit diesem Beitrag zusammengefügt.

    Zitat

    zu meiner 2. Frage: "Kurse" wir jetzt mit der Maus markiert, allerdings verschiebt sich dann das Menu nach links...?

    ...und der weise Hintergrund ist leider auch noch da.

    Die Verschiebung nach links kommt von den beiden padding-Tags in meinem CSS-Code. Das kannst Du weglassen, dann wird aber der Button ohne Leerraum dargestellt. Probier's aus! Wie Du das lösen kannst, ist mir bedauerlicherweise nicht klar.

    Eventuell kannst Du das lösen, indem Du den einzigen Menüpunkt, der verschoben wird, ganz nach hinten (bzw. rechts) verschiebst (durch Umsortieren der Menüeinträge). Damit klar ist, was gemeint ist, könntest Du als Text auch "Startseite" verwenden.


    Wegen des Hintergrunds im Dropdown-Menü. Probier mal das aus:

    CSS
    .mm-collapse.mm-show {
    background-color: rgb(201,222,188) !important;
    border-radius: 6px;
    margin-left: -43px;
}

    Das negative margin-left habe ich reingenommen, weil der Text "Achtsamkeitskurse ...." je nach Bildschirmbreite rechts aus dem Fenster läuft. Besser kürzen (auch wegen Mobilansicht). Dann kannst Du auf das margin-left verzichten.


    Wahrscheinlich musst Du das Ganze auch noch mit Media Queries versehen, damit auch in der Mobilansicht ordentlich dargestellt wird

    @Indigo66: super, funktioniert. Dazu habe ich noch den Tipp von @Dautrich integriert, somit passt auch die Farbe.


    Das mit dem Verschieben muss ich noch testen bzw. akzeptieren dass es so ist hmm


    jetzt stört mich nur noch dass "hover" und "klicken" beides parallel funktioniert, aber das ist nicht ganz so wichtig.


    Vielen Dank nochmal an alle :thumbup:

    Zitat von elbarto

    ...Das mit dem Verschieben muss ich noch testen bzw. akzeptieren dass es so ist hmm

    Oder einfach zusätzlich identisches padding auch ohne hover festlegen z.B.:


    Code
    .mod-menu__heading.nav-header.mm-toggler.mm-toggler-nolink.mm-collapsed {
     padding: 5px 15px;  
}

    padding: 5px 15px hatte ich so schon übernommen. Daran lag es nicht.


    Mir ist aber aufgefallen, wenn man in der mobilen Ansicht mit dem Hamburger Menu das Menu aufklickt, dass dann der Punkt Kurse nach links eingerückt ist. Kommt evtl. daher? Warum auch immer das so ist...

    Zitat von elbarto

    padding: 5px 15px hatte ich so schon übernommen...

    Habe ich gesehen und daher auch diese Werte in meinem obigen Code in #13.

    Lass deine negativen Gedanken und Gefühle entschwinden und

    ergänze einfach deine user.css mit meinem obigen Code und lass dich überraschen.

    Beachte in der ersten Zeile des Codes in #13 ist kein hover und dies steht ja auch im Text von #13

    beer


    Das hat tatsächlich geklappt. Allerdings rutsch das jetzt nach rechts wenn man drauf klickt ;(


    Müssen die Einträge alle so einzeln stehen oder kann man zusammenfassen?

    Ich hab eh n.n. verstanden wie die Befehle funktionieren, ich forsche da nochmal nach.


    Danke bisher

    Zitat von elbarto

    ...Allerdings rutsch das jetzt nach rechts wenn man drauf klickt ;(

    Lass einfach bei meinem Code in #13 die Klasse .mm-collapsed auch noch weg:

    Code
    .mod-menu__heading.nav-header.mm-toggler.mm-toggler-nolink {
padding: 5px 15px;
}


    Zitat von elbarto

    Müssen die Einträge alle so einzeln stehen oder kann man zusammenfassen?

    Das padding im Code von Dautrich könntest du entfernen weil identischer Wert ...