icons in header to change color

[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;
}

[Tom]

Hi there,

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

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

Hope this helps 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[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?

[Tom]

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;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[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..

[Tom]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Jeffrey]

sent in contact

[Tom]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[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..

[Tom]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Jeffrey]

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

[Author]

Posts