How To have Custom Header Height Expand Responsively - Question | JoomShaper
Back to the questions

How To have Custom Header Height Expand Responsively

MH

Matt Hunt

Helix Framework 1 year 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

0
1 Answers
Order by
Oldest Newest Votes
Rashida Rahman
Rashida Rahman
Accepted Answer
Support Agent 1 year ago #105599

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

0