Change Altitude Pro Themes Header Colors On Scroll

By default, the background color for the Altitude Pro themes site header is transparent on the front page and black on all other pages. The CSS in this tutorial enables you to change, on scroll:

  • The background color for the site header
  • The color of the nav menu links
  • The color of the site title text

site-header

All you need to do is paste the following CSS at the end of the Altitude Pro child themes style.css file:

.site-header.dark { 
    background-color: #fff;
}

.site-header.dark .genesis-nav-menu a {
    color: #333;
}
        
.site-header.dark .site-title a,
.site-header.dark .site-title a:hover {
    color: #333!important;
}

Don’t forget to clear all caching, especially if using Chrome.

Was This Tutorial Helpful?

Free

$0

Access only to all free tutorials per month.



Monthly

$75

Access to 10 premium tutorials per month.


Tutorial Request


Includes code guarantee and coding support.

Yearly

$500

Access to 15 premium tutorials per month.


Monthly Tutorial Request


Includes code guarantee and priority coding support.