How to make Hestia theme header full height

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;
}
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us