Return to previous page

Change header background - by robphat - on WordPress WooCommerce support

This topic has 10 replies, 3 voices, and was last updated 9 years ago ago by Robert Hall

robphat

Participant

March 31, 2015 at 15:36

How do we change the background color of the header? I didn’t see any option for that in theme options. Or can it only be done with css?

#53620 Copied

9 Answers
Robert Hall

Support staff

March 31, 2015 at 15:41
Hello,

Please add following code in custom.css file
```
.header{
  background: #932ca5;
}
```
Here is a video tutorial how to create custom.css: https://www.youtube.com/watch?v=Qok2zRedRMY&feature=youtu.be.

Regards,
Robert Hall.
#53623 Copied
robphat

Participant

March 31, 2015 at 15:55

Thanks. I know how to add custom css. I just didn’t know if there was a way to do it in theme options.

Also, for header styles that have tworows (like header style 12), can we have one background color for one row, and another background color for the other row?

Thankls,
Rob

#53630 Copied

Eva Kemp

Support staff

April 1, 2015 at 15:28

Hello,

Please show a screenshot for what rows you want to change background color.

Thank you.
Regards,
Eva Kemp.

#53935 Copied

robphat

Participant

April 1, 2015 at 18:13

http://www.awesomescreenshot.com/image/5384/1f74ecb05bfbc152e77b4df9ad319dc4

But as the screenshot says, I guess I can just change css of menu background, yes?

#54033 Copied
Robert Hall

Support staff

April 1, 2015 at 18:42
In this case you can use following code
```
.navbar-collapse{
  background: red;
}
```
Regards,
Robert Hall.
#54043 Copied
robphat

Participant

April 1, 2015 at 19:01

Thanks. And what CSS is use to change the color of the sticky menu – the one that fixes to the top of the screen when you scroll down?

Thanks,
Rob

#54047 Copied
Robert Hall

Support staff

April 1, 2015 at 19:29
Please try this code.
```
.fixed-header .navbar-collapse{
  background: red;
}
```
If you want to change backgroung for full width fixed header use following code
```
.fixed-header-area{
 background: red;
}
```
Regards,
Robert Hall.
#54052 Copied
robphat

Participant

April 1, 2015 at 19:48

Awesome. Thanks!

#54054 Copied

Robert Hall

Support staff

April 1, 2015 at 20:08

Hello,

You’re welcome!

Regards,
Robert Hall.

#54060 Copied
Tagged: background, change, customize, header, template, woocommerce, wordpress
Viewing 10 results - 1 through 10 (of 10 total)