Mega-Dropdown - Hover

Thema wurde von webmaker, 9. Oktober 2016 erstellt.

  1. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    33.557
    Danke erhalten:
    10.408
    Danke vergeben:
    1.497
    Das sollte das Problem lösen:
    Code:
    .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
        color: #DeineSchriftfarbe;
        background-color: #DeineHintergrundfarbe;
    }
     
  2. jessica_p

    jessica_p Mitglied

    Registriert seit:
    29. Dezember 2017
    Beiträge:
    24
    Danke erhalten:
    2
    Danke vergeben:
    14
    #22 jessica_p, 13. März 2018
    Zuletzt bearbeitet: 14. März 2018
    Oh herrlich @barbara , das klappt ja auf Anhieb! Danke Dir vielmals!
    Weißt Du vielleicht auch, wie man diesen Pixelversatz lösen kann (siehe Screenshot)?
    Bei Menüpunkten mit Untermenüs ist beim "Hovern" oberhalb des Wortes noch etwas vom Menühintergrund zu sehen. Bei den Menüpunkten ohne Untermenü sieht es prima aus, so hätte ich es gerne überall. Weißt Du da eine Lösung?

    Und gibt es eine Möglichkeit, dass beim Curser nicht nochmal das Wort erscheint? Ist das browserabhängig (ich benutze Chrome) oder kann ich das im Shop deaktivieren?

    Danke Dir im Voraus.

    LG Jessica
     

    Anhänge:

  3. Andili

    Andili Erfahrener Benutzer

    Registriert seit:
    29. Dezember 2017
    Beiträge:
    249
    Danke erhalten:
    18
    Danke vergeben:
    110
    Barbara bist halt doch die beste...
     
  4. Anonymous

    Anonymous Mitglied

    Registriert seit:
    24. August 2018
    Beiträge:
    19
    Danke erhalten:
    0
    Danke vergeben:
    13
    Hallo zusammen, ich stoße auch fast ein Jahr später auf das gleiche Problem. Und komme leider mit den Codes nicht weiter.

    Ich möchte gerne ebenfalls die Hover und active Farbe bei den Kategorien und UNterkategorien ändern. Das funktioniert leider weder mit den Codes, noch mit Änderungen im StyleEdit.

    Kann mit bitte jemand schnell weiterhelfen....lasse meinen Shop ungern so stehen.
    Shop: (Link nur für registrierte Nutzer sichtbar.)

    vielen Dank

    LG Das Nager-Atelier
     
  5. Dennis (MotivMonster.de)

    Dennis (MotivMonster.de) G-WARD 2013/14/15/16

    Registriert seit:
    22. September 2011
    Beiträge:
    30.416
    Danke erhalten:
    5.917
    Danke vergeben:
    1.060
    Beruf:
    Mann für alles :)
    Ort:
    Weilburg
    warum nicht? Wie hast es versucht und was ist pasiert?
    hast du browser cache geleert? Shop cache?
     
  6. Anonymous

    Anonymous Mitglied

    Registriert seit:
    24. August 2018
    Beiträge:
    19
    Danke erhalten:
    0
    Danke vergeben:
    13
    Hi Dennis,

    ich habe die beiden Codes

    Code:
    .navbar-collapse .navbar-categories ul.navbar-nav > li > ul.dropdown-menu > li.active > a, .navbar-collapse .navbar-categories ul.navbar-nav > li > ul.dropdown-menu > li a:hover, .navbar-collapse .navbar-categories ul.navbar-nav > li > ul.dropdown-menu > li a:active {
    color: #ffffff;
    }
    .navbar-collapse .navbar-categories ul.navbar-nav > li > ul.dropdown-menu > li > ul > li:hover > a {
    color: #ffffff;
    } 
    eingefügt und es passiert nichts (siehe Bild)

    Caches wurden alle geleert, gerne kannst Du mal reinschauen ob es bei Dir eine weiße Schriftfarbe im Hover und Active anzeigt.

    Danke
    Gruß
    LS
     

    Anhänge:

  7. Dennis (MotivMonster.de)

    Dennis (MotivMonster.de) G-WARD 2013/14/15/16

    Registriert seit:
    22. September 2011
    Beiträge:
    30.416
    Danke erhalten:
    5.917
    Danke vergeben:
    1.060
    Beruf:
    Mann für alles :)
    Ort:
    Weilburg
    das wird mir angezeigt
    Code:
    .navbar-collapse .navbar-categories ul.navbar-nav > li > ul.dropdown-menu > li.active > a, .navbar-collapse .navbar-categories ul.navbar-nav > li > ul.dropdown-menu > li a:hover, .navbar-collapse .navbar-categories ul.navbar-nav > li > ul.dropdown-menu > li a:active {
        background: transparent;
        color: rgba(255, 255, 255, 0);
    }
    sonst setz mal ein !important dahinter
    hast im richtigem style unter eigenes css eingefügt? gespeichert? shop cache modul / seiten und browser dann leren.
     
  8. Anonymous

    Anonymous Mitglied

    Registriert seit:
    24. August 2018
    Beiträge:
    19
    Danke erhalten:
    0
    Danke vergeben:
    13
    Hi Dennis,

    danke für Deine Unterstützung.
    leider geht es immer noch nicht (auch nicht mit dem Code, den ich dann ändern möchte, oder ein "!important" dahinter setze.

    im angehängten Bild findest Du den Style Editor, der das ganze ja eigentlich abdecken sollte.

    richtiges Style (steht aktiv nebendran) - alles gespeichtert, alle caches geleert - von allem.

    Mir scheint das fast irgendwie ein Bug zu sein, die Einstellungen scheinen nicht zu greifen.

    Vielen Dank nochmal für Dein Feedback.

    Gruß
    LS Shop-Hover und Active.png
     
  9. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    33.557
    Danke erhalten:
    10.408
    Danke vergeben:
    1.497
    Das ist die normale Anzeige für das Megadropdown, nicht die für den Hover.

    du hast da das hier:
    Code:
    @media (min-width: 768px){
    .navbar-collapse .navbar-categories ul.navbar-nav > li.open > a {
        color: rgba(255, 255, 255, 0);
    }}
    und im Dropdown hast Du das ähnlich:
    Code:
    @media (min-width: 768px){
    .navbar-collapse .navbar-categories ul.navbar-nav > li > ul.dropdown-menu > li.active > a, .navbar-collapse .navbar-categories ul.navbar-nav > li > ul.dropdown-menu > li a:hover, .navbar-collapse .navbar-categories ul.navbar-nav > li > ul.dropdown-menu > li a:active {
        color: rgba(255, 255, 255, 0);
    }}
    Das muss beides auf #fff geändert werden.
     
  10. Anonymous

    Anonymous Mitglied

    Registriert seit:
    24. August 2018
    Beiträge:
    19
    Danke erhalten:
    0
    Danke vergeben:
    13
    Hi barbara,

    vielen Dank auch für Deinen neuen Code.
    Leider funktioniert das auch nicht, ich glaube solangsam es liegt an mir.

    Ich habe Deinen beiden Codes genommen und in die "zusätzliche CSS" gemacht und die color auf #fff gesetzt.....siehe Bild.
    Leider trotzdem kein Erfolg

    Oder muss ich diese Codes in irgendeiner separaten CUSTOM.CSS ändern ?!?!wenn ja wo finde ich die auf dem FTP?

    Ich bin etwas ratlos.

    LG
    LS
     

    Anhänge:

  11. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    33.557
    Danke erhalten:
    10.408
    Danke vergeben:
    1.497
    Nö, ist nicht da.
    Gib den Code ein, klicke auf "Speichern" und danach auf "Übernehmen"
    Dann im Style Editor unten auf "Vorschau" und auf "Speichern"
     
  12. Anonymous

    Anonymous Mitglied

    Registriert seit:
    24. August 2018
    Beiträge:
    19
    Danke erhalten:
    0
    Danke vergeben:
    13
    Mhhh das ist komisch, ich habe Deine Reihenfolge nun noch einmal penibel eingehalten.

    Kann es sein das ich in der "li-class" etwas ändern muss? "level-2-child"?!?!

    Bei mir passiert leider immer noch nichts. Aber wenn ich nach speichern erneut in die zusatz-CSS gehe, ist der Code immer noch aktiv?

    Ansonsten muss ich mal ein Ticket eröffnen, aber es wäre schön, wenn es jetzt nicht so bleiben müsste.

    Vielen Dank

    LG
    LS
     
  13. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    33.557
    Danke erhalten:
    10.408
    Danke vergeben:
    1.497
    Das ist der Code, der in der Console zu sehen ist. Deine Änderung taucht irgendwie überhaupt nicht auf, also auch nicht darunter.

    Das ist als würde der Code nicht gespeichert.

    Leere mal bitte im Shop den Cache für Module und Seiten.
     
  14. Anonymous

    Anonymous Mitglied

    Registriert seit:
    24. August 2018
    Beiträge:
    19
    Danke erhalten:
    0
    Danke vergeben:
    13
    Hallo barbara,

    ich werd verrückt.
    Deine beiden Codes haben funktioniert, aber erst nachdem ich sie in den "zusätzlichen CSS" ganz oben eingefügt habe.
    Ich habe bisher alles immer untereinander geschrieben (also nacheinander.

    Jetzt sitzen die beiden Codes mit #fff ganz oben und schon funktioniert alles.

    Vielen vielen Dank für Deine (und auch Deine Geduld Dennis)

    Toll das es Euch gibt.

    LG
    LS
     
  15. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    33.557
    Danke erhalten:
    10.408
    Danke vergeben:
    1.497
    Kann es sein, dass Du den Code einfach irgend wo zwischen gesetzt hattest?
    Also vor eine "}" statt danach
     
  16. Anonymous

    Anonymous Mitglied

    Registriert seit:
    24. August 2018
    Beiträge:
    19
    Danke erhalten:
    0
    Danke vergeben:
    13
    Hi barbara,

    heute traue ich mir alles zu :)
    kann gut sein, da achte ich das nächste mal drauf, kann ich jetzt so nicht mehr sagen.

    Danke
     
  17. Dennis (MotivMonster.de)

    Dennis (MotivMonster.de) G-WARD 2013/14/15/16

    Registriert seit:
    22. September 2011
    Beiträge:
    30.416
    Danke erhalten:
    5.917
    Danke vergeben:
    1.060
    Beruf:
    Mann für alles :)
    Ort:
    Weilburg
    Lass zwichen den Abschnitten bei eigenem CSS immer eine Leerzeile stehen.
    Ich kommentiere mir das auch immer was ich da angepasst habe
    Code:
    /* Dies ist ein Kommentar.
    Er besitzt keine Auswirkungen. */
     
  18. Segler

    Segler Erfahrener Benutzer

    Registriert seit:
    22. September 2011
    Beiträge:
    99
    Danke erhalten:
    1
    Danke vergeben:
    40
    Ich knüpfe mal hier an, da es auch um das Mega Dropdown geht. Ich würde die Menüleiste gerne gegen unbeabsichtigtes Hovern schützen. Heißt das Megadropdown sollte erst nach einer Verzögerung, z.B. 1 Sekunde öffnen.

    Durch diesen Code wird der Hover Effekt der Menüleiste verzögert dargestellt:
    Code:
    .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
    transition-delay: 1s;
    }
    Das Megadropdown selbst wird dadurch nicht verzögert geöffnet. Da probiere ich noch herum. Habt ihr vielleicht einen Hinweis für mich?

    Danke