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

WP SITES

2784

Original Genesis Tutorials & 6000+ Guaranteed Code

Snippets

  • Consultation
  • Full Access
  • Log in

Scroll Indicator JS For WP Themes

Adds a scroll indicator at the bottom of your fixed header in Genesis and other WordPress themes. Only displays on desktops.

Includes the files for use in Genesis child themes & the Twenty Twenty One default theme for WordPress.

Demo Video

Shows the scroll indicator working in the Genesis Sample child theme and the Twenty twenty default theme for WordPress.

Tested using the Twenty Twenty default theme for WordPress & the Genesis Sample child theme by StudioPress.

Note : Includes 2 download folders. One for Genesis and a child theme for Twenty Twenty with the code pre-installed.

Installation Steps – Genesis

There’s 3 steps :

  1. # Upload the scroll-indicator.js file to your child themes folder like this :
  2.  

  3. # Copy & paste the PHP code from the functions.php file to the end of your child themes functions file.
  4.  

  5. # Copy & paste the CSS to the end of your child themes style.css file and clear caching
  6.  

Installation Steps – Non Genesis Themes

If you’re using the Twenty Twenty theme for WordPress or another non Genesis theme, you can install the folder named twentytwenty-child or use the code from this folder for use in your non Genesis child theme.

If your theme includes hooks, you can use the code for Genesis and simply change the hook name from genesis_after_header to whatever your theme uses.

Also works with themes using scroll to top.

Download Folder – Genesis

Download Folder – TwentyTwenty

jQuery Scroll Twenty Twenty Theme

Reader Interactions

Comments

  1. Jonathon Fowler says

    January 23, 2022 at 9:01 am

    Hi, can this be made to work on mobile devices too?

    Log in to Reply
    • Brad Dalton says

      January 23, 2022 at 9:30 am

      Yes however you would need to make the site header sticky at all screen widths. CSS modifications are needed but not PHP or JS.

      Log in to Reply

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
 

Loading Comments...
 

You must be logged in to post a comment.