[neobrainless]

So I have managed to change the background colour of the header, but now the top-menu links are invisible until you hover over them, and the drop down menus don’t look right remaining black… Is it possible to change both of those? And ideally, change the copyright info area background to match, too.

My website is: http://www.snekkeren.co.uk

Thanks, Rohan

[Pratik]

Hi @neobrainless,

For menu text color, try following code in Appearance=> Customize=> Additional CSS box:

.main-navigation a {
    color: #000000;
}

.main-navigation .menu-item-has-children a {
    color: #ffffff;
}

You can change #000000 and #ffffff to any color you want.

First block changes the main color, second block changes sub menu item color.

For footer copyright, try following code:

.site-info {
    background-color: #ffffff;
    color: #000000;
}

.site-info a {
    color: #e8554e;
}

.site-info a:hover, 
.site-info a:focus {
    color: #cccccc;
}

Let me know how it goes.

Regards,
Pratik

[giopas]

Hi @Pratik,

I have a similar/connected question:

I would like to change the menu color from white (#000000) to gold (#dd9933) when I select it/hover on the item (by default it is red…).

I have therefore added this code but it does not seems to work:

.main-navigation a {
    color: #FFFFFF;
}

.main-navigation a:hover
.main-navigation a:focus {
    color: #dd9933;
}

What am I missing here?

Thanks in advance!

giopas

[Pratik]

Hi @ giopas,

Can you please post in your site url?

Regards,
Pratik

[giopas]

Sure: katastrofic.com

Can I also ask suggestions on where to look to change the font of “Who are we” which is different from other menu items (Music, Contact us, etc)?

Thanks!!

[giopas]

In relation to last part of the question I simply hided Page Titles as explained here: https://catchthemes.com/support-forum/topic/remove-page-titles-3/

I now only need to change default color of the menu (when selected) and also the “send” button (when selected) in the “contact page”.

Thank you in advance for you kind help!

[Pratik]

Hi @giopas,

For menu, try following code:

.main-navigation .current-menu-item > a, 
.main-navigation .current-menu-ancestor > a,
.main-navigation li:hover > a, 
.main-navigation li.focus > a {
    color: #dd9933;
}

If you mean changing font only for “Who We Are”m then try following code:

#menu-item-67 {
    font-family: Arial;
}

Change font family to your desired font.

For send button, let me know what you want and i will provide you with code.

Regards,
Pratik

[giopas]

Hi Pratik,

thanks for yout help, for navigation menu it works perfectly!

For “Who We Are” it seems not working, but at the end I prefer having it hidden 🙂

Lastly, in relation to the send button, I use Contact Form 7 plugin if this can be helpful. What I would like to change is that when you hover on it it changes not in red bt agin in #dd9933 color.

EDIT: no problem, found it [1]:

input.wpcf7-form-control.wpcf7-submit:hover {
background-color: #dd9933;
border-color: black;
}

Thanks again,

giopas

[1] https://theme.co/apex/forums/topic/change-colour-of-submit-button-in-contact-form-7/

[Author]

Posts