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

WP SITES

2665

Original Genesis Tutorials & 5000+ Guaranteed Code

Snippets

  • Support
  • Newsletter
  • Videos
  • Log in

Premium Member? - Request custom code

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

PHP Code

template_include

get_body_class

if else

array

class_exists

foreach

sprintf

add_action

printf

variable

Advertise · WPEngine · Genesis · Log in

  • How Premium Membership Works
  • Sign Up
  • Support
  • Subscription Details/Invoice
  • Tagged Tutorials
  • Access-Download Problems