Sekundärspalte icons Farbe festlegen beim sticky header on hover

Thema wurde von Basti B., 3. Oktober 2020 erstellt.

  1. Basti B.

    Basti B. Erfahrener Benutzer

    Registriert seit:
    25. September 2020
    Beiträge:
    45
    Danke erhalten:
    1
    Danke vergeben:
    27
    Hallo in die Runde,

    freue mich, nach intensiver Testphase nun auch zur Gambiofamilie zu gehören!
    Z.Z. baue ich intensiv am Shop in der Gambiocloud, Theme ist Malibu, URL ist https://der-spanische-gourmet.de.
    Bin Shop- und Forum-Noob, nehmt es mir daher nicht übel, falls ich hier auf dem falschen Kanal poste und sich mein Fach-Jargon in Grenzen hält :) .

    Zu einem meiner Problemchen:
    Die gewählte Farbwahl bei "normalem" header gefällt mir soweit sehr gut.
    Wenn der header sich nun von normal zu sticky header verändert (also zusammenzieht), verschwinden meine icons aus der Sekundärspalte bei mouse hover, da die hover-Farbe dieselbe ist wie der sticky hintergrund.

    Über den SE bekomme ich nicht die gewünschte Farbkombination hin, deswegen meine Hoffnung, die icons via css adressieren zu können.

    Also sinngemäß
    .sticky header nav icons:hover
    color: #mycolor

    So in der Art :)

    Danke schon mal für eure Unterstützung!

    Schöne Grüße
    Basti
     
  2. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    35.352
    Danke erhalten:
    11.198
    Danke vergeben:
    1.601
    Willkommen im Forum.

    Versuche es mal mit dem Code im eigenen css:
    Code:
    @media (min-width: 768px){
    #header.sticky .navbar-secondary .navbar-nav > li > a:hover, #header .navbar-secondary .navbar-nav > li > a:focus,
    #header.sticky .navbar-secondary .navbar-nav > li > a:hover svg path, #header.sticky .navbar-secondary .navbar-nav > li > a:focus svg path, #header.sticky .navbar-secondary .navbar-nav > li > a:hover svg polygon, #header.sticky .navbar-secondary .navbar-nav > li > a:focus svg polygon {
        fill: #fff;
        color: #fff;
    }}
    Damit sollten die Icons und falls das mal kommt auch eigener Content, beim Hovern weiß werden
    statt #fff kannst Du Deinen Farbcode eingeben.
     
  3. Basti B.

    Basti B. Erfahrener Benutzer

    Registriert seit:
    25. September 2020
    Beiträge:
    45
    Danke erhalten:
    1
    Danke vergeben:
    27
    Wow Barbara, ich hatte nicht so schnell mit einer Antwort gerechnet.
    Und das Beste ist, der Code klappt! Super, vielen Dank!
    Schönen Sonntag noch :)