Skip to content

How to decrease Hestia Post header height

You can reduce the padding above and below the post or page header in Hestia by adding a small CSS snippet to the Customizer's Additional CSS panel.

Before

After

If you'd like to decrease the area below and above the header then please go to Appearance > Customize > Additional CSS and add the following code:

.page-header.header-small .container{
    padding-top:  130px !important;
    padding-bottom: 67px !important; 
}

📝 Note: Adjust the top and bottom padding as you wish by changing the number value. The least the bottom padding can go down to is 67px.

Save your changes and that's it!

Looking to decrease the height of the Slider section?

Before

After

This can be achieved by adding the following code to the Additional CSS editor within the Customizer, and adjust the value of 600px as you need.

/* ThemeIsle Support - decrease big title section's height */
.carousel .page-header {
	min-height: 600px !important;
}

Was this helpful?