• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2787

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

  • Try Premium
  • Log in

Change Site Header CSS On Scroll

This tutorial provides the code which enables you to change the site header elements on scroll. You can determine the point where the change occurs simply by modifying the value in pixels. In this example, when you scroll down 250px, the background-color and site-title color change to black and white respectively.

Here’s the demo video to show you exactly what the code does:

Tested using the Minimum Pro child theme by StudioPress.

You can use this code in any theme which includes a fixed header. Simply swap out the site-header class with the class you want to modify for any element in any theme.

Here’s the code for logged in members:

Register for full access

Minimum Pro Theme

Reader Interactions

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags