WP SITES

2948 Tutorials & 189 Plugins
Quote

Essence Pro Fixed Header

—

by

Brad Dalton

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 :

  1. # Upload the title-functions.php file to your Essence Pro themes lib folder replacing the default file of the same name.

    2.  

    The screenshot inside the download folder named title-functions.png shows the code which is modified.

  2. # Copy & paste the CSS from the style.css file to the end of your Essence Pro themes style sheet and clear caching.

    3.  

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.

Download Folder

2 responses to “Essence Pro Fixed Header”

  1. Tim Burkart Avatar
    Tim Burkart

    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!

    Reply
    1. Brad Dalton Avatar
      Brad Dalton

      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.

      Reply

Was This Tutorial Helpful?