- This topic has 10 replies, 2 voices, and was last updated 6 months, 3 weeks ago by
Jeffrey.
-
AuthorPosts
-
June 28, 2020 at 12:47 pm #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;
}June 28, 2020 at 1:54 pm #1344830Tom
Lead DeveloperLead DeveloperHi 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-developmentJune 28, 2020 at 5:38 pm #1344931Jeffrey
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?
June 29, 2020 at 9:36 am #1345898Tom
Lead DeveloperLead DeveloperIn 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-developmentJune 29, 2020 at 10:12 am #1345949Jeffrey
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..
June 29, 2020 at 2:24 pm #1346232Tom
Lead DeveloperLead DeveloperHmm, 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-developmentJune 29, 2020 at 2:39 pm #1346251Jeffrey
sent in contact
June 29, 2020 at 2:43 pm #1346253Tom
Lead DeveloperLead DeveloperSo 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-developmentJune 29, 2020 at 4:09 pm #1346297Jeffrey
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..
June 30, 2020 at 9:46 am #1347267Tom
Lead DeveloperLead DeveloperI’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-developmentJune 30, 2020 at 1:19 pm #1347473Jeffrey
I had to change directions a little. I’ll be starting a new topic π
-
AuthorPosts
- You must be logged in to reply to this topic.