Header/menu background color

Hi,
I am trying to change the background color of the header (top div inside the header background image) and main menu in CloudHost theme (using WordPress).
So... I've made a child theme, and it's style.css looks like this (with the theme name and all that added above):

@import url("../CloudHost/style.css");
@import url("../CloudHost/css/wp.css");

.imageBg #gk-head > div:first-child {
background: rgba(5, 13, 16, 1);
}
... but it doesn't work. I also tried following the instructions given here: https://www.gavick.com/forums/cloudhost ... 32452.html but with no change.

What am I doing wrong?

P.S. It would be great if there was documentation for WP, not just Joomla, or am I missing it somehow?

Hi,

Please check this article about child themes: http://www.gavick.com/documentation/wor ... ld-themes/

You should copy css directory from the parent into your child and made your modification inside (not in the CloudHost-Child/style.css).

And try with this code:

Code: Select all

.imageBg #gk-top-bar {
background: red;
}

If you want to add only css modifications, there's no need to create Child Theme - you can use CloudHost/css/override.css file for your modifications (First you have to enable this override option from Template OPtions -> Advanced tab).

This article should be also helpfull:
http://www.gavick.com/documentation/joo ... -size-etc/

Documentation for this theme may be found here:
http://www.gavick.com/documentation/wor ... uration-2/

But you don't find there tips how to change these things - it's really a lot of elements in each theme so it's not possible, you have to use Firebug - check the article above or Google Dev Tools to inspect and change elements on your website.

Hi,
I guess I didn't explain my problem well enough. The code that you suggested is for a bar above the header image. I would like to change the color of the bar with the logo and menu (nav) in it. It is currently set to transparent, but i need it dark grey (also when it scrolls down with the page).



P.S. Thank you for a quick reply.

Now I understand, please try with this code:

Code: Select all

.imageBg #gk-head > div:first-child,
#gk-menu-wrap {
   background: #yourcolor;
}

Works like a charm. Thanks Piotr!