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 :
- # Upload the scroll-indicator.js file to your child themes folder like this :
- # Copy & paste the PHP code from the functions.php file to the end of your child themes functions file.
- # Copy & paste the CSS to the end of your child themes style.css file and clear caching
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.
Hi, can this be made to work on mobile devices too?
Yes however you would need to make the site header sticky at all screen widths. CSS modifications are needed but not PHP or JS.