Vary header colors

[adventures]

Let me clarify – I’m going to use the custom color settings to change the header to a dark background color with white nav/link text and darker rollover/hover/active text. Then I want to have different colors for the home page header – a light background color #f7f7f7, dark nav/link text #000, and the rollover/hover/active text and upper little bar color #e96a40.

[David Martin – Support]

Ok, so the homepage header background would be this:

.home .header-wrap,
.home #header-section .is-sticky #header.sticky-header {
    background-color: rebeccapurple;
}

– David.

[adventures]

And changing the nav text color and hover/active states on the home page only will be?

[David Martin – Support]

Hi,

You can use the CSS that Kyle provided you with previously, simply replace .page-id-1341 with .home.

Thanks,
David.

[adventures]

Ok sorry one more question – what code can I use to make all the naked header (light) pages have the menu text active/hover color orange? It’s now dark grey and not readable. For example: /right-size-furniture/dining-room/

Attachments:

You must be logged in to view attached files.

[Rui Guerreiro – SUPPORT]

Hi,

Add the code below to your custom css option.

.header-naked-light nav .menu > li.current-menu-ancestor > a, .header-naked-light nav .menu > li.current-menu-item > a, .header-naked-light nav .menu > li.current-scroll-item > a, #main-navigation ul.menu > li:hover > a {
    color: #F78F07!important; 
}

Let us know if it worked.

-Rui

[adventures]

That works partially, but my sticky header and other pages have an orange header so:
1. When I scroll down the active/hover stays orange.
2. when I’m on other interior pages with an orange header the active/hover is orange as well.

I attached screenshots to show what I mean.

Attachments:

You must be logged in to view attached files.

[Rui Guerreiro – SUPPORT]

This reply has been marked as private.