The solution in this download folder enables you to make the site header in your Essence Pro theme sticky. To do this, the color of the header elements & background are changed from transparent to white as seen in this screenshot :
Demo Video
Shows the Essence Pro themes header fixed on scroll with the header hero image displaying below the site header rather than behind it.
Installation Steps
There’s 2 steps :
- # Upload the title-functions.php file to your Essence Pro themes lib folder replacing the default file of the same name.
- # Copy & paste the CSS from the style.css file to the end of your Essence Pro themes style sheet and clear caching.
The screenshot inside the download folder named title-functions.png shows the code which is modified.
Once you’ve completed the installation steps, you’ll also need to activate the one-click child theme setup which is enabled when you activate the Essence Pro child them for the first time.
Hi Brad,
1. Can I place the CSS in the customizer, or is it best to add it to style sheet file for Essence Pro?
2. What happens when/if Studiopress updates the theme? Is there an upgrade proof way to accomplish a sticky header? Perhaps putting it in functions.php?
Thank you!
Hey Tim.
1. The CSS is tested when added to the end of the style.css file. If you add it in the customizer, it may not work properly as that adds the styles inline.
2. StudioPress very rarely update child themes but if they do, the code should still work otherwise i will post a update.