I am thinking of adding the phone number to the top right of my site, but would prefer to change the background color of that part of the header only to either black or white. If I change it to white, I will also need to change the color of the phone number. Could you please provide the appropriate css to accomplish this?
Many Thanks!
Hey reelhomes2017,
Try adding this css code in Quick CSS (located in Enfold > General Styling):
#header .phone-info {
background: black;
color: white;
padding: 5px 20px;
}
Hope this helps :)
Best regards,
Nikko
Thanks, I added the css, but the top bar is still blue (same color as the header area) instead of black as specified in the css. I cleared cache to view it.
Hi,
Did clearing the cache help or did you need additional help?
Best regards,
Jordan Shannon
It didn’t help but I was able to fix the issue through Enfold, General Styling, Alternate Background Color. The only other thing I need to do now is figure out how to make the telephone number a darker color (maybe black). I don’t want to change the “Logo Area Secondary Font Color,” because that changes the color in the navigation. I want to add css that just makes the phone number darker and maybe the social media buttons to the right of the phone number in the top right of the header.
I tried adding this but it didn’t work:
.phone-info span { color: orange !important; }
Thanks for your assistance!
Hi,
Can you give us a link to your site? so we can check.
Best regards,
Nikko
Hi,
I have added this css code in Quick CSS:
#header_meta {
background: black;
}
#header .phone-info {
color: white;
}
Let us know if it’s good, if not please post a mockup of what you’re trying to achieve.
Best regards,
Nikko
Perfect, thank you so much! Greatly appreciated.
We can close out this support ticket.
Hi,
Glad to hear that. Thanks for using Enfold! Have a nice day :)
Best regards,
Nikko