change color of blue bar

Yes I would also like to know how to change the Black background and grey ‘hover’ colours on the Main navigation(drop down Nav too) and also the Black background on the Widget Title section.
I have looked and tried to make changes to the CSS file but to no avail. I found where to change the Hyper link colour but don’t need that changed.

It would be GREAT if this feature would be added as an easy Setting features for other who will maintain the site.

Thanks in advance, Karlopa

This plugin may do the trick for you.
https://www.ads-software.com/plugins/theme-tweaker-lite/screenshots/

@szaszi2014:

Add this to the bottom of your child theme CSS or custom CSS:

#navWrapper {
background: #C20061; /* navigation bar background color */
}

You can use https://colorpicker.com/ to grab the color code you want.

———–

@karlopa:

This is just CSS, very simple stuffs. We can add new rules to the bottom of a separate stylesheet (such as child-them CSS or custom CSS) to overwrite whatever above it. No need to search around in the parent theme’s style.css for the right place to edit–that’s actually not recommended.

For the navbar background, please see the answer to szaszi2014’s question above.

As for the hover color, use this:

.main-navigation li:hover > a {
color: #000; /* navigation menu item text color on hover */
background: #fff; /* navigation menu item background color on hover */
}

Thanks ‘Techievous’ but that didn’t work, added it to my custom CSS. Even cleared the Cache and still black. I’m going to hunt on the php files to see if I can find any colour codes, hidding there. Certainly isn’t any for the NAV on the style sheet, at least that I can see.

Thanks ‘Techievous’ but that didn’t work, added it to my custom CSS. Even cleared the Cache and still black. I’m going to hunt on the php files to see if I can find any colour codes, hidding there. Certainly isn’t any for the NAV on the style sheet, at least that I can see.

Yes, it does work. See screenshot here: https://i.imgur.com/xZWKJ2Y.png. I changed the navbar background to a pink-ish color; I also change the hover background color to a green-ish with dark text. Both CSS codes work when apply correctly.

You’d probably want to learn basic CSS and HTML first before advancing to PHP though, because one mistake and you’ll be lock out of your entire site if you mess with PHP.

Thanks I will try the ‘hover’ link as that is what I am wanting to change more, the Black default background of ‘current’ page and the greys from the hover… drop down menu.
I know CSS and HTML quite well as I have built numerous sites from code. I realize if I change the style sheet I should create a child-style sheet or use the ‘custom’ section.
Thanks.. and how about the Black Menus for the widgets, where do I find that code, so I can tweak it in a child theme.

how about the Black Menus for the widgets, where do I find that code, so I can tweak it in a child theme.

Change the colors as needed:

.widget-area .widget-title {
background: #fefefe; /* widget title background color */
color: #181818; /* widget title font color */
}

Ok for some reason it does not work when I put it in the Custom CSS section.
But it does work if I test the colour code in the style sheet. So I will create a child-theme, style.css for what I want.
Thanks.

Besides child theme, you can also use a plugin like Jetpack (an official plugin by WordPress themselves) or Simple Custom CSS.

• If you choose Jetpack: Install and activate the plugin –> go to Jetpack –> Settings –> activate custom CSS module –> go to Appearance –> Edit CSS –> copy-paste the code there.
• If you choose Simple Custom CSS: Install and activate the plugin –> then go to Appearance –> Custom CSS –> copy-paste the code in there.

Thanks, the Jetpack edit CSS works well.

Hi Techievous,
thanks for your support! Installing Simple Custom CSS and adding your suggested lines there works for me as well!
cheers
Frank