Top bar navigation style change

[marmaneous]

I’d like to change the homepage navigation style when the header is just transparent. As is, the selected home page is dark grey and the other pages are white. When you scroll down they all become darker grey and it looks fine. But the background image I am using makes the “home” text be hard to read. Is there any way to change this to white text when there is no scrolling and someone is at the top of the page and have the style change when scrolling occurs? I also want hover on other items in the navigation to be the white version when it’s a transparent header. Is that possible as well?

[Rui Guerreiro – SUPPORT]

Hi,

Can you add the code below to your custom css option

.current_page_item span {
    color: #b3a8a8;
}

.is-sticky .current_page_item span {
    color: #2c2c2c;
}

See if this works for you.

-Rui

[marmaneous]

That didn’t work. Seems like everything still looks the same.

[Rui Guerreiro – SUPPORT]

This reply has been marked as private.

[marmaneous]

Yes but when you scroll the text is still white. I want it to change to black like the rest of them.

[David Martin – Support]

I see this:

Have you changed the page or resolved this?

[marmaneous]

So I see the change now, however I want the top border to appear white when the header is transparent. Also, when you hover over the other links other than Home, they remain white text but have a white top border appear over them as well.

[marmaneous]

Also this code

.current_page_item span {
    color: #fff;
}

On other pages other than the home makes the current page heading in the nav white text as well when it’s at the top of the page, thereby blending into the background of the header. It only reappears once you start scrolling. I believe it’s still pulling the same code from the home page, but this time the top isn’t transparent it’s white as well.

[David Martin – Support]

White Hover Text & White Hover Border (Top) – On A Naked Header And Homepage Only:

.home .page-header-naked-light .sticky-wrapper:not(.is-sticky) nav .menu > li.menu-item > a:hover, .home  .page-header-naked-light .sticky-wrapper:not(.is-sticky) nav.std-menu .menu > li > a:hover {
   
  color: #fff!important;
}

.home  .page-header-naked-light .sticky-wrapper:not(.is-sticky) nav.std-menu .menu > li:hover > a,
.home  .page-header-naked-light .sticky-wrapper:not(.is-sticky) nav.std-menu .menu > li:hover > a {
    box-shadow: 0 5px 0 rgba(255,255,255, 1) inset!important;
}

[marmaneous]

Alright great that works perfectly! Now how do I fix the invisible current page item when I am visiting other pages other than the home page when I am not scrolling? Visit any other page other than home and don’t scroll to see what I’m talking about.

[Rui Guerreiro – SUPPORT]

Also add this code.

.current_page_item span {
    color: #2c2c2c;
}

-Rui

[marmaneous]

This reverts the home page current item to #2c2c2c as well. :/ is there any way to make a page-id exception for this code, since the home page is the only I need to work like this?

[Rui Guerreiro – SUPPORT]

I’m only seeing the homepage with #2c2c2c in the current item only when you scroll and enter in the sticky but that is affected by the rule below and not the one I provided.

.is-sticky .current_page_item span {
    color: #2c2c2c;
}

To change the color of the current item only in the homepage and in the sticky mode use this code.Change to the desired color.

.home .is-sticky .current_page_item span {
    color: #2c2c2c;
}

When the homepage loads this is what I’m seeing.
https://www.dropbox.com/s/6yq4zwuesyuwfzi/Screenshot%202016-12-13%2018.23.46.png?dl=0

-Rui

[marmaneous]

Hmmmm, so there seems to be a confusion (sorry for being so difficult) but what is the total code that needs to be entered to have a white text navigation on the top with no scroll and hover generates a white top padding not #2c2c2c, and when scrolling or on any other page (scrolling/no scrolling) the original header is there with nothing invisible. I don’t know how else to depict what I am trying to accomplish but basically I want all the regular functions of my original header on all other pages and when I am scrolling on the homepage but when I am not scrolling on the homepage I want transparent header, white text and white hover. That’s it. :/

[marmaneous]

We have gone back and forth so it’s confusing to see which code is needed and not needed unless all of it is needed?