[Resolved] Font Color After Scrolling

Home › Forums › Exoplanet Pro › Font Color After Scrolling

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • February 16, 2022 at 4:18 pm #15259
    Ivette Palomo
    Participant

    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

    February 16, 2022 at 5:17 pm #15260
    Andy
    Keymaster

    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?

    February 18, 2022 at 1:28 pm #15282
    Ivette Palomo
    Participant

    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.

     

     

    February 18, 2022 at 2:31 pm #15287
    Andy
    Keymaster

    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.

    February 19, 2022 at 10:41 am #15295
    Ivette Palomo
    Participant

    Greetings Andy,

    Yes, this last CSS worked perfectly.

    Thank you.

    February 19, 2022 at 11:15 am #15296
    Andy
    Keymaster

    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;
}
    February 23, 2022 at 12:01 am #15319
    Ivette Palomo
    Participant

    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.

     

    February 23, 2022 at 9:58 am #15321
    Andy
    Keymaster

    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;
}
    February 24, 2022 at 10:05 pm #15333
    Ivette Palomo
    Participant

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

    March 1, 2022 at 10:51 am #15341
    Ivette Palomo
    Participant

    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.

    March 2, 2022 at 9:56 am #15346
    Andy
    Keymaster

    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;
}
    March 2, 2022 at 10:54 am #15347
    Ivette Palomo
    Participant

    Perfect Andy.  Thank you!!!

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)
  • The topic ‘Font Color After Scrolling’ is closed to new replies.