[Resolved] icons in header to change color

Home Forums Support icons in header to change color

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #1344776
    Jeffrey

    I added some custom icons in the header (navigation area), they are white. When scrolling they disappear because they are white 🙂 I need them to change to black in the scroll bar.

    Is there a way I can match the behavior of the shopping cart?

    Here is the CSS I am using

    .notifications_icons {
    color: #ffffff;
    vertical-align: middle;
    margin: -7px;
    }

    .my_bubble_notify {
    color: #ffffff;
    border-radius: 3px;
    background-color: #f7823f;
    vertical-align: 20%;
    position: relative;
    font-size: small;
    padding: 0.1em 5px;
    }

    #1344830
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    I’m not seeing them right now, but you can do this:

    .navigation-stick .notifications_icons {
        color: #000;
    }

    Hope this helps 🙂

    #1344931
    Jeffrey

    So that totally worked for the header while scrolling. However for the pages where there is no header element used I have the white background as well. So the icons are still not showing in the header outside the scroll on those pages.

    Any ideas?

    #1345898
    Tom
    Lead Developer
    Lead Developer

    In that case, I would always use black:

    .notifications_icons {
        color: #000;
        /* other stuff */
    }

    Then, target the Header Element:

    .header-wrap .notifications_icons {
        color: #fff;
    }
    #1345949
    Jeffrey

    OK this solved the problem for the Pages with no background, but for the pages where I use the header elements (merge with header) the icons are now black instead of white..

    #1346232
    Tom
    Lead Developer
    Lead Developer

    Hmm, that’s where the .header-wrap CSS should kick in. Can you link me to one of those pages?

    #1346251
    Jeffrey

    sent in contact

    #1346253
    Tom
    Lead Developer
    Lead Developer

    So all of the pages I’m seeing are merged, so maybe that CSS should be #fff.

    However, what about just removing the color from the CSS? That way, it should inherit from the navigation.

    #1346297
    Jeffrey

    However, what about just removing the color from the CSS? That way, it should inherit from the navigation.

    That was the answer, you are a life saver. So simple 🙂 Thank you!!!!

    I know this is a little out of the realm, but do you know how to make those notifications that say “zero” disappear. I would only like them to show if the value is higher than zero..

    #1347267
    Tom
    Lead Developer
    Lead Developer

    I’m not seeing the icons on the site right now, even when logged in?

    It would only be possible to do so if the numbers have a specific CSS class for 0.

    #1347473
    Jeffrey

    I had to change directions a little. I’ll be starting a new topic 😉

Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.