Return to previous page

Header and Menu CSS - by additive01 - on WordPress WooCommerce support

This topic has 26 replies, 7 voices, and was last updated 10 years, 1 months ago ago by Eva Kemp

additive01

Participant

July 29, 2014 at 08:19

Hello,

I would like to re-style the header so that the block containing the logo and main nav have a background colour. This includes the outer and inner block containing the logo.

To do this, I tried to add CSS to the custom.css file but I can’t seem to get the main nav hover and active link CSS to work properly. You’ll see from the demo link below that I have changed the header background, but when I scroll down the centre of the header block remains white – it should be green like the rest of the block. Also, you’ll see that I’ve changed the nav link text colour to white, but I can’t seem to make the hover or active link states a different colour.

Can you help please?

Thanks,

Blair

Please, contact administrator
for this information.

#11121 Copied

25 Answers
Jack Richardson

Support staff

July 29, 2014 at 08:29
Hello,

Please add this code into the custom.css file to change background color of the white part:
```
.fixed-header-area .fixed-header {
background: #82cabc;
}
```
Add the following code into the custom.css to change hover state link color:
```
.header-type-variant6 .menu > ul > li > a:hover {
color: green;
}
```
Change ‘green’ to your desired color.

Regards,
Jack Richardson
#11123 Copied
additive01

Participant

July 29, 2014 at 09:39

Thanks Jack, we’re nearly there…

There seems to still be a problem with two more styles:

1) The active item state in both the full and scrolled down conditions seems to be adopting the main site colour. How do I change this to a specific colour so it is different to the background of the header block please?

2) The hover state style for the ‘non-scrolled down’ condition is working well. When I scroll down though, the hover style is not working – the on-hover menu item adopts the main site colour style, not the custom one.

Any chance you could send me the selectors to change these please?

Thanks 🙂

#11128 Copied
Jack Richardson

Support staff

July 29, 2014 at 10:02
Hello,

This is code for main menu active state links:
```
.menu .current-menu-item > a {
	color: red !important;
}
```
And this is for fixed navigation hover state links:
```
.menu > ul > li > a:hover {
        color: "your desired color here";
}
```
Regards,
Jack Richardson
#11132 Copied
toby19

Participant

July 29, 2014 at 15:36

Hi

I am trying to have one main menu item red, menu item ‘Sale’. I placed in the default.custom.css this style:

.nav-sale {
color: #aa1a1a;
}

I then placed in the appearance > menu > sale > css (optional field):

nav-sale

This isn’t changing its colour. Any ideas?

Thanks

#11223 Copied

Jack Richardson

Support staff

July 29, 2014 at 15:44

Hello,

It is necessary to rename “default.custom.css” to “custom.css”.
Here is a video tutorial how to enable custom.css: https://www.youtube.com/watch?v=Qok2zRedRMY&feature=youtu.be.

Regards,
Jack Richardson

#11226 Copied

additive01

Participant

July 29, 2014 at 15:48

Thanks Jack – this is resolved for me now 🙂

#11231 Copied

Jack Richardson

Support staff

July 29, 2014 at 15:54

You’re welcome!

Regards,
Jack Richardson

#11235 Copied

toby19

Participant

July 29, 2014 at 15:56

Hi

Thanks I have done that and so its now named custom.css however in there the css style i created that is:

.nav-sale {
color: #aa1a1a;
}

is placed in appearance > menu > menu item (Sale) and its CSS Classes (optional) as nav-sale

This isn’t changing that specific menu item font color to #aa1a1a

Any ideas?

#11237 Copied

Eva Kemp

Support staff

July 29, 2014 at 17:08

Hello @toby19,

Please provide us with wp-admin panel credentials in Private Content.
As I understood you correctly you want to change font color for the specific menu item, don’t you?

Regards,
Eva Kemp.

#11262 Copied

toby19

Participant

August 1, 2014 at 11:05

Please, contact administrator
for this information.

#11577 Copied

toby19

Participant

August 1, 2014 at 11:06

Hi

Thanks for looking into this. I’ve sent login to private.

#11578 Copied

Eva Kemp

Support staff

August 1, 2014 at 11:41

Hello,

I’ve edited the code in custom.css.
Please check the menu item now.

Regards,
Eva Kemp.

#11585 Copied

toby19

Participant

August 1, 2014 at 12:00

Thank you so much!!

#11587 Copied

Eva Kemp

Support staff

August 1, 2014 at 12:04

You’re welcome.

Regards,
Eva Kemp.

#11590 Copied

Rottner

Participant

September 24, 2014 at 09:31

Hello,

Thanks to your code:

.fixed-header-area .fixed-header {
background: #1a2023;
}

i could change the background color of the fixed header.

i now would like to:

– change the backround color of the “normal header” to #1a2023
and
– change the menu-font-color of both the “normal” and the fixed header to #fff (if i set the “Main Font” in Theme Options “Typography” to white it also sets my headline in the content to white, even if i set all the H1-H6 in Themeoption “Typography” to #1a2023″)

thank you very much

#16767 Copied

Rottner

Participant

September 24, 2014 at 09:33

ah and the fixed header has a 1px border to the bottom.. would be nice if this could disappear / also change color.
thanks!

#16768 Copied

Robert Hall

Support staff

September 24, 2014 at 09:41

Hello Rottner,

Please provide us with link to the page.

Regards,
Robert Hall.

#16769 Copied

Rottner

Participant

September 24, 2014 at 11:03

of course, here’s the site:

Please, contact administrator
for this information.

#16780 Copied
Eva Kemp

Support staff

September 24, 2014 at 11:19
Hello,

Please use this code in custom.css file:
```
header {
 background: #1a2023;
}
.menu > li > a {
  color: #FFF !important;
}
.fixed-header-type-16 {
    border-bottom: 0px solid #EBEBEB;
}
```
Thank you.

Regards,
Eva Kemp.
#16783 Copied
Rottner

Participant

September 24, 2014 at 11:36

wow thanks for the superfast answer.
i only have one problem left. now the normal header has a 1px border to the bottom.

#16785 Copied
Robert Hall

Support staff

September 24, 2014 at 11:46
Please, add this code into custom.css file.
```
.header-type-16 {
border-bottom: 0px solid #ebebeb; */
}
```
Regards,
Robert Hall.
#16787 Copied
Rottner

Participant

September 24, 2014 at 11:54

thanks alot!

#16788 Copied

Robert Hall

Support staff

September 24, 2014 at 11:55

Hello,

You’re welcome!

Regards,
Robert Hall.

#16789 Copied

whabsrl

Participant

October 21, 2014 at 00:57

Hi I was having the same problem of additive01.

I’ve tried with your suggestions and current link now works with the color I choose but i’m still having problems with hover and visited state link.

This code: .menu > ul > li > a:hover {color: “your desired color here”;} it’s not working for me.

Can u help me?

Thank u.

#20712 Copied

Eva Kemp

Support staff

October 21, 2014 at 15:07

Hello @whabsrl,

Could you please clarify what you want to achieve?
Also please provide us with your site link.

Thank you.
Regards,
Eva Kemp.

#20814 Copied
Viewing 26 results - 1 through 26 (of 26 total)