This solution enables you to remove your header image and replace it with the site title & description when you scroll down like you see in the following demo video.
Demo Video
Shows the logo being removed after scrolling 250px replaced by the site title on all screen sizes.
The code in this tutorial assumes you added your header image via the Header Image setting in the customizer.
The CSS makes the site header fixed on all screen sizes.
Code Installation
There’s 3 simple steps :
Step 1 : From the download folder, upload the file named scroll.js to your child themes js folder.
Step 2 : From the download folder, copy & paste the PHP code from the functions.php file to the end of your child themes functions file.
Step 3 : From the download folder, copy & paste the CSS from the style.css file to the end of your child themes style.css file and clear caching.
Register or login to access the download folder for members :
Related Tutorials
- 3 Ways To Change Logo On Scroll Using jQuery In Genesis Sample Theme
- Replace Site Title With Logo On Scroll
- Smaller Site Header Before Default Which Changes Logo Size On Scroll
- Display Fixed Site Header On Scroll
- Display Logo on Scroll
- Change Logo On Scroll
- Change Logo To Site Title When Responsive Menu Displays & Add Logo To Mobile Menu
Leave a Reply
You must be logged in to post a comment.