Maintain header / Jumbotron size

Illdy
1

If I remove the front buttons and don’t use any text or logo inputs the jumbotron space shrinks.

Is it possible to force the height / size so the background image stays visible?

Thanks so much

2

Hi there,
Thanks for reaching out.
Relating to your question here, could you try out the following CSS code under the Appearance>Customize>Additional CSS section:

@media only screen and (max-width:767px){
#header.header-front-page {
min-height: 1200px !important;
}
}

I hope this helps.
Best Regards,
Support.

3

I tried this and it does not work. Once i remove the button in the jumbotron, the header disappears entirely.

I really appreciate the help to customize this. This template is great.

4

Another idea is if we can change all the colors (outline, fill, and text) to completely transparent. That could be a work around.

5

HI there,
Thanks for keeping in touch.
In this case, could you perhaps try out the following CSS code:

#header.header-front-page .bottom-header .header-button-one {
background-color: rgba( 0, 0, 0, 0 );
}
#header .bottom-header .header-button-one {
background: rgba(255, 255, 255, 0);
border: 0px;
color: #FF0000;
}

I hope this helps.
Best Regards,
Support.

6

Its not quite fully transparent, plus the text is still an actual color. Is there any other way to do this? Either fully removing the button while keeping the background size or making the text and background of button fully transparent?

7

to be specific when i applied this:

@media only screen and (max-width:767px){
#header.header-front-page {
min-height: 1200px !important;
}
}

it caused the mobile version to become static also vs responsive.

8

hi there

Try codes with transparent text and with !important tag at the end,
remove min-height 1200px css

9

Yep, i added opacity to your first set and it worked like a charm. thanks so much!

#header.header-front-page .bottom-header .header-button-one {
background-color: rgba( 0, 0, 0, 0 );
}
#header .bottom-header .header-button-one {
background: rgba(255, 255, 255, 0);
border: 0px;
color: #FF0000;
opacity: 0.1;
}

10

Cool :slight_smile:

Is there anything else for us?

11

not on this one. thanks again

12

Hello there,

I am glad the solution worked for you.
Please feel free to contact us again in the future regarding any other issues.

Best Regards,
Support