How to have custom header height expand responsively - Forum | JoomShaper
Staff replied Helix Framework

How to have custom header height expand responsively

Asked by Matt Hunt 3 years ago Last activity 3 years ago

I've a custom 3 column header made with a dark background and looks just right on a desktop, but on smaller devices the columns will reposition themselves one over the other, but the height of the header doesn't change to match. Any suggestions to get the header height to expand so that the modules in the header always have the dark background?
Thanks

1 reply

Rashida Rahman Staff
3 years ago

Hi there!

Thanks for your query.

Please use the following code in your custom CSS to increase header height for your smaller devices:

@media (max-width: 991px){
#sp-header {
    height: 400px !important;
}
}

But do you really want the mobile header this big?

Note: Path towards custom CSS(Joomla 3): Extensions>Templates>Styles> Click on your current default template name then choose Template Options. Then find custom CSS within the custom code.

Best Regards

Log in to reply.