Return to previous page

Change header row color - by Tiina - on WordPress WooCommerce support

This topic has 12 replies, 2 voices, and was last updated 7 years ago ago by Rose Tyler

Tiina

Participant

November 22, 2017 at 10:46

I’m using the Header Type no.6. It uses my main color as the color of the top bar. I would like the background to be white and font my normal font color. How do I do this?

#178290 Copied

11 Answers
Rose Tyler

Support staff

November 22, 2017 at 10:54
Hello,

You may use this code to change colors of top bar:
```
.top-bar {
    background-color: red;
    color: white;
}
.top-bar a {
    color: white !important;
}
```
How to create custom.css you can watch in this tutorial https://www.youtube.com/watch?v=Qok2zRedRMY.

Regards
#178292 Copied
Tiina

Participant

November 22, 2017 at 12:35

Hi,

This css doesn’t seem to work for me. It doesn’t change anything.

#178314 Copied

Rose Tyler

Support staff

November 22, 2017 at 13:03

Please provide link to your site. Did you add the code in custom.css file of parent theme or in style.css file of child theme?

Regards

#178315 Copied

Tiina

Participant

November 22, 2017 at 13:15

I use a separate custom css plugin, because some reason I didn’t get the custom.css folder to work in the beginning. This plugin has been working fine though with other custom changes I have made to the site.

I can try to activate the custom.css file too again, if you help me. Am I supposed to add the code in custom.css file of parent theme or create a second custom.css file in child theme (i’m using child theme)?

Please, contact administrator
for this information.

#178318 Copied
Rose Tyler

Support staff

November 22, 2017 at 13:20
Please change the previous code to:
```
.top-bar .wishlist-link a span, .top-bar a {
    color: white !important;
}
.top-bar {
    background-color: red !important;
    color: white;
}
```
and add it in style.css file of child theme.

Regards
#178320 Copied
Tiina

Participant

November 22, 2017 at 13:35

Now it changes the color to red and font white. I would like the font to be #464646 and the red part to be white.

#178324 Copied

Rose Tyler

Support staff

November 22, 2017 at 13:39

Simply change color values in the code.

Regards

#178328 Copied

Tiina

Participant

November 22, 2017 at 13:48

All else I can change but the hidden top bar arrow and icons stays white.

#178330 Copied
Rose Tyler

Support staff

November 22, 2017 at 13:56
Please try this code:
```
.header-type-6 .top-bar li:before, .header-type-6 .top-bar a:before, .header-type-6 .top-bar .search .search-link:before, .show-top-panel:before {
    color: #464646;
}
.header-type-6 .top-bar .wishlist-link a:hover span {
    color: #464646 !important;
}
```
Regards
#178332 Copied
Tiina

Participant

November 22, 2017 at 14:09

It worked, thanks!

#178337 Copied

Rose Tyler

Support staff

November 22, 2017 at 14:09

You’re welcome!

Regards

#178338 Copied
Viewing 12 results - 1 through 12 (of 12 total)