Changing Main Menu Color

Hi Kim,

No problem, I’ll be happy to help ?? Please try pasting the following CSS in to Appearance > Customise > Additional CSS:

/* menu background colour */
.main-navigation {
	background-color: #b41212;
}

And if you also want to change the hover colour of the menu links, this CSS should do the trick:

/* hover colour of menu links */
.main-navigation ul a:hover {
	color: #121212;
}

Let me know how you get on.

• This reply was modified 5 years, 9 months ago by Gemma Evans.

Thank you so much, that worked great! Can you tell me how I might use that same solution for the social menu? Thanks again!

Hi @khkpalmer,

That’s great to hear ?? This CSS can be used to change the background colour of the social icons in your footer:

.social-links ul a:before {
    background: #b41212;
{

Does that do what you need?

Yes it does, thank you!

• This reply was modified 5 years, 8 months ago by khkpalmer.

This was very helpful, thank you! What if I wanted to also change the color of the “dots” between pages, or the color of the page that is currently “selected”?

My website is: https://www.mariahpostlewait.com

Thank you!

Sorry, and one more question, when I view my site on my phone, the header color is correctly changed but suddenly the menu buttom has the old salmon color in a small box around it. How can fix this?