Hi @sheelagh,
Please try adding the css below to your site via the customizer in Appearance > Customize > Additional css.
The # colour values can be changed to whatever you prefer.
Depending on the colours you select, you might need to either darken or lighten the text. If you need help with that, please let me know.
If the css doesn’t work, please keep it in the customizer so I can troubleshoot it. Thanks.
/* change the top content area background colour */
.site-top-content {
background: #42a1f4;
}
/* change the mobile toggle background colour */
.menu-toggle {
background: #42a1f4;
}
/* change the toggle hover colour */
.menu-toggle:hover, .menu-toggle:focus, .meu-toggle:active, .main-navigation.toggle-on .menu-toggle {
background: #7441f4;
}
/* change the mobile menu background colour */
@media screen and (max-width: 1020px) {
.menu-primary {
background:#42a1f4;
}
}
Wow thanks Gary thats brilliant ! It looks great. Just one thing I forgot to ask about changing footer background colour and footer text colour – is that an easy fix too?
Thanks Sheelagh
Do you mean the footer with the powered by WordPress info, or do you mean the widget area at the bottom of the site?
Can you post a url to the site?
Hi Gary sorry I should have been more specific – I want to change the background color and the text color for the widget area in footer 1, 2 & 3 at the bottom of the Goran site. You can see a screen shot here https://drive.google.com/file/d/0By6dWjvsJpvpbmlfbHV2MXJ0dFE/view?usp=sharing
thanks
Thanks for clarifying that.
Please try using this css. You can change the colour values to whatever you prefer. I used garish colours to make it stand out.
It the css doesn’t work, or if it doesn’t cover anything, please let me know.
Thanks š
/* change background colour for footer widget area */
.footer-widget-area {
background: #0000ff;
}
/* change footer widget titles colour */
.footer-widget .widget-title {
color: #00ffff;
}
/* change footer widgets link colour */
.footer-widget a {
color: #00ff00;
}
/* change footer widgets link colour on hover */
.footer-widget a {
color: #00ff00;
}
/* change social icons colour */
ul[id^="menu-social"] a::before {
color: #0000ff;
}
Brilliant thanks a million Gary
You’re welcome, glad I could help š
Hi Gary
Two things ..
1. when hovering over link text in the footer widget area nothing happens. Should the CSS code in the second case below use a different parameter?
/* change footer widgets link colour */
.footer-widget a {
color: #00ff00;
}
/* change footer widgets link colour on hover */
.footer-widget a {
color: #00ff00;
2. The social icons once clicked go a kind of charcoal colour – see screenshot
https://drive.google.com/file/d/0By6dWjvsJpvpS0tVYjAxVWttQjQ/view?usp=sharing
Thanks for your help
Sorry about that, the second rule in your last comment is wrong. Please replace it with this.
ul[id^="menu-social"] a:hover:before, .footer-widget a:hover {
color: #00ff00;
}
If the css doesn’t appear to work, please post a link to your site. I’ll need that in order to troubleshoot it.
Thanks š
Super Gary thanks you very much
