Show Progress Bar On Scroll Before Header In Genesis

This download provides which which adds a progress bar displayed on scroll.

The progress bar accurately indicates how much of the page has been read/scrolled as you can see in the demo video.

Watch Demo Video #

Tested using the Genesis Sample child theme by StudioPress which includes the fixed site header.

The progress bar container is only output on page scroll meaning the 8px height is only added when the progress bar is displaying.

There’s 3 steps relating to usage of the code in the download folder.

Step 1 : Copy & paste the PHP code from the functions.php file to the end of your child themes functions file or template file.