Increase Header Size only on HomePage

isavelletri1 · May 23

Hi,

I would like have my homepage with a full transparent header and higher height to fit the whole image; and all other pages the header with color background and set to 130px height (what I have now). If I change the height on the global settings, it changes for the whole website. Is there a way to customize it only for one page?

https://maidsespana.es

Phil · May 23

Hi,

Do you you have an example showing what you want to achieve?

I do not want to misunderstand you.

Thanks

isavelletri1 · May 23

Homepage with transparent header and background image and text like this: https://themes.muffingroup.com/be/renovate4/services-pricing/

The rest of the pages like I have right now: https://maidsespana.es/agencia-de-servicio-domestico-madrid/

I have the settings set for transparent header and 130px height so the inside pages look like what I have now.

Phil · May 24

For that, I suggest using the Header Builder.

After you create a header template, you can assign it to the home page using the Page options.

https://support.muffingroup.com/video-tutorials/header-builder-2-0/

Best regards

isavelletri1 · May 24

I've tried but it doesn't looks the same AND the max height I can put is 734px, otherwise it cuts the image short.

If I add the image I want on the transparent header from the homepage as featured image, Is there a way to customize its size via css?

Phil · May 24

Try the following CSS code:

.home #Header{
 min-height: 800px!important;
}

Put it in Betheme -> Theme options -> Custom CSS & JS -> CSS.

Best regards

isavelletri1 · May 24

Thank you! It worked perfectly. The only thing is that the image also needs adjusting on mobile/responsive. IS there a way?

https://maidsespana.es

Phil · May 25

Try the following CSS code:

@media only screen and (max-width:767px){
 .home #Header{
   min-height: 260px!important;
 }
 .home #Header_wrapper{
   background-size: contain!important;
   background-position-y: 60px!important;
 }
}

Best regards

isavelletri1 · May 27

Thank you!

Increase Header Size only on HomePage

Comments