Skip to content

How to make Hestia theme header full height

If you want the Hestia theme header to fill the full height of the browser viewport, you can do it with a single CSS rule added to the Customizer's Additional CSS section.

If you'd like to make the header image in Hestia/Hestia Pro take up the entire height of your browser then please navigate to  Appearance -> Customize -> Additional CSS section and add the following code:

.page-header{
height: 100vh !important;
}

This will make the header size on all pages full height, if you'd like just the homepage to be full height then you can use the following code instead:

.home .page-header{
height: 100vh !important;
}

That's all there is to it! Save your changes and check your website.

If you want to reduce the height, use the following code

.home .page-header{
height: 600px !important;
}
.carousel .page-header {
    min-height: unset !important;
}
Was this helpful?