Font Color After Scrolling

[Ivette Palomo]

Greetings,

I would like to change the font color of the site title, site description, and main menu (and down caret) after scrolling or on hover.

Please advise.  Thank you.

Yaheli

[Andy]

For the site title color after scrolling, use this custom CSS:

#masthead.scrolled .site-title a {
  color: #000000;
}

For site title on hover:

.site-title a:hover {
  color: #000000;
}

For site title after scrolling and hover:

#masthead.scrolled .site-title a:hover {
  color: #000000;
}

For the site description after scrolling, it would be this:

#masthead.scrolled .site-description {
  color: #000000;
}

For the site description on hover:

.site-description:hover {
  color: #000000;
}

For the site description after scrolling and on hover:

#masthead.scrolled .site-description:hover {
  color: #000000;
}

…or if site title and description are to be same color, then bundle together like so:

#masthead.scrolled .site-title a,
#masthead.scrolled .site-description {
  color: #000000;
}

For the main menu items on hover, there is a customizer setting for this at Appearance > Customize > Header and Menu Styling > Menu Item (Hover) Color.
Does this option fit with what you want to accomplish with the main menu?

[Ivette Palomo]

Andy, thank you for your help.  Here is the website so that you can better understand the following comments – agoodland.com, which is presently employing the “bundle” CSS that you gave me.

First, I should have explained that I want the sticky header, when unscrolled and without hover, to display a clear background with white letters.  Then when scrolled or upon hover, I want the sticky header to display a white background with black letters.

Second, I did not explain myself properly with regard to the “hover” portion.  I found that when the sticky header is unscrolled and when you hover over the header it displays the white background.  This is fine.  However it is at this point that I need the letters to become black.

When I use these CSS –

#masthead.scrolled .site-description {
color: #000000;
}

and
#masthead.scrolled .site-title a {
color: #000000;
}

or

#masthead.scrolled .site-title a,
#masthead.scrolled .site-description {
color: #000000;
}

The letters do go from white to black when scrolled.  However when unscrolled and I hover over the header, the letters stay white and are therefore unseen because of the white background that comes up upon hover.

When I use these CSS –

#masthead.scrolled .site-description:hover {
color: #000000;
}

and

#masthead.scrolled .site-title a:hover {
color: #000000;
}

The letters become black only when I hover over the title or the description.  Rather than that they should be black without hovering over them.

Third, with regard to the main menu, I want the letters to be white when the background is clear (unscrolled and without hover) and I want them to turn black when the sticky header is either scrolled or hovered upon.  When I change the Appearance > Customize > Header and Menu Styling > Menu Item (Hover) Color, the goal I just described is not reached.

Again, thank you.

 

 

[Andy]

Sorry I read it as when hovering on the indivdual items. I see what you mean now.

To make the header clear when not scrolled, change the transparency to zero (the horizontal bar below the color palette, move the control all the way to the left) at ‘Customize’ > ‘Header and Menu Styling’ > ‘Header Background Color’

Now to make the header background white when hovering or scrolling, change the ‘Header Background Color (Scrolled)’ option to white from the color palette and make sure the transparency is set to 100, all the way to the right.

Next to make the Site Title and Description white, go to ‘Customize’ > ‘Colors’ and change the ‘Header Text Color’ to white.

And then you also want the text color to be black when hovering or scrolling so add this custom CSS:

#masthead:hover .site-title a,
#masthead:hover .site-description,
#masthead.scrolled .site-title a,
#masthead.scrolled .site-description {
  color: #000000;
}

Please let me know if that works, and we’ll move onto the menu styling.

P.S. remove the previous custom CSS I posted as it will conflict with the new CSS above.

[Ivette Palomo]

Greetings Andy,

Yes, this last CSS worked perfectly.

Thank you.

[Andy]

OK thanks for letting me know.

For the menu go to ‘Customize’ > ‘Header and Menu Styling’ and change both ‘Menu Item Color’ and ‘Menu Item (Hover) Color’ to white.

Then to make the menu black when hovering or scrolling add this custom CSS:

#masthead:hover .main-navigation a,
#masthead.scrolled .main-navigation a {
  color: #000000;
}

#masthead:hover .main-navigation .sf-arrows .sf-with-ul:after,
#masthead.scrolled .main-navigation .sf-arrows .sf-with-ul:after {
  border-top-color: #000000;
}

And finally we’ll need to make sure the mobile menu icon does not disappear into the background when hovering/scrolling, so add this custom CSS:

#masthead:hover .toggle-nav span,
#masthead:hover .toggle-nav span:before,
#masthead:hover .toggle-nav span:after,
#masthead.scrolled .toggle-nav span,
#masthead.scrolled .toggle-nav span:before,
#masthead.scrolled .toggle-nav span:after {
  background: #000000;
}

[Ivette Palomo]

Greetings Andy and thank you.

The first set of CSS worked in that the toggle is black when I scroll or hover.

However the last CSS does not make the navigation letters black when I scroll or hover.  They stay white and therefore unseen.

 

[Andy]

I didn’t realise you are using the menu button instead of the mobile icon, so in this case this is the custom CSS to use:

#masthead:hover .toggle-nav i,
#masthead.scrolled .toggle-nav i {
  color: #000000;
}

[Ivette Palomo]

Andy, thank you very much!  The header is working perfectly now.  I appreciate your support!

[Ivette Palomo]

Greetings Andy,

One more question on this topic regarding the sub-menu.

Is there a way to make the sub-menu different from the main menu & header effects?  Right now the header background is clear with white letters.  When scrolling or when hovering over the header the background turns white and the letters turn black.  The sub-menu responds in the same way.  It is a white background with black letters.

So what I would like is for the sub-menu to be red (#710000) background with white letters and then when hovered over, I want the colors reversed, white background with red letters.

Is this possible?

Again, thank you.

[Andy]

I think this should do it:

.main-navigation .sub-menu {
  background: #710000;
}

#masthead:hover .main-navigation .sub-menu a,
#masthead.scrolled .main-navigation .sub-menu a {
  color: #ffffff;
}

#masthead:hover .main-navigation .sub-menu a:hover,
#masthead.scrolled .main-navigation .sub-menu a:hover {
  color: #000000;
}

[Ivette Palomo]

Perfect Andy.  Thank you!!!

[Author]

Posts