Header Contact Info / Social Header font/icon color

How can I change the Header Contact Info font colors? And how can I change the Contact Info & Social Media icon color?

The theme allows change of the pre-header background color, but I can find no way of controlling the font color. It is always white. Also, the Social Media Menu icon - is always white.

The Header Contact Info icons default to the General Primary Color as specified in Customize>Colors>General.

These default settings are not adequate. How can I control the pre-header font and pre-header icon colors?

Thank you very much!

Hello there,

You can use this additional CSS code:

    .has-hero .header-contact, 
    .has-hero .header-contact a,
    .has-hero .header-contact .fa {
      color: #fff000;
    }

To apply different color for the icons, use this:

    .has-hero .header-contact .fa {
      color: #ff0000;
    }

Regards,
Kharis

Thank you so much, Kharis! This is progress! I installed both lines of code.

Here are the results:

It only effects the pre-header font & icon colors on the first page. On a computer screen, or when viewing the site on a mobile device these lines of code do not effect the Contact page, only the Home page.

Also, the second line of code that is for the icon color change only effects the phone icon by the phone number. It doesn’t change the Social Menu icon color.

The Social Menu icon color (on the Home Page) did change from the default white, but it changed to the font color (specified in the first line.) It still rolls-over to the theme General Primary Color.

It would be nice to be able to control the Social Menu icon color and roll-over color too - if possible.

Thank you again, and for answering so quickly. By the way - all of the custom code you are providing me through support I am/will be using on ALL of the sites I am building. I personally think that if these features were built into the theme settings without requiring custom code, that the Sydney Pro theme would be more competitive. But I still love it, even with the custom code…

Let’s address this first to make us easier track the progress.

Please try this code:

    .header-contact, 
    .header-contact a,
    .header-contact .fa,
    .has-hero .header-contact, 
    .has-hero .header-contact a,
    .has-hero .header-contact .fa {
      color: #fff000;
    }

    .header-contact .fa,
    .has-hero .header-contact .fa {
      color: #ff0000;
    }

Regards,
Kharis

!!! It works!

Thank you Kharis, once again. Now the Contact Info font and icon colors are responding. I have added this line of code to my arsenal!

Perhaps a separate line of code can control the Social Menu color - for with and without rollover?

I greatly appreciate all the help.

For social icons, you could use this code:

    .social-navigation a {
      color: #ff0000 !important;
    }

    .social-navigation a:hover {
      color: #fff000 !important;
    }

Regards,
Kharis

It works, Kharis! Mission accomplished. I greatly appreciate all of your help! You are truly making Sydney Pro a MUCH better and more flexible/usable theme.

I do still think that ALL of the Additional Code customization of the theme SHOULD be standard options in the theme. It would make Sydney Pro a more competitive product.

This issue is now solved and I will add this code to my ever growing arsenal.

Sincerely,

Dan Marshall