Essence Pro – How Reduce Height of Hero Header on Pages Other than Home Page?

[donkiely]

We are rebuilding a site and using Essence Pro for it. We've found a beautiful image for the hero header area, and the home page is starting to come together nicely.

But for all other pages on the site, we'd like to reduce the size of the header, even if it means losing the hero page title.

First, is there a setting somewhere that would do this? Thus far I've not found one.

If not, is the solution to do it with CSS, hiding the relevant areas on other pages? I haven't thought this one through, but assume it's doable.

Or do I need to create a new page template?

Thanks for any suggestions or guidance!

[Brad Dalton]

You could search for the CSS rules which include the .header-hero class and modify the declaration which applies to the height. To do this excluding the front page, you could use PHP code to add a custom body class with a conditional tag to exclude the front page.

I saw this in the main style sheet

padding-bottom: 14vw;

There are other methods as well.

---

Tutorials for StudioPress Themes.

[Author]

Posts