is There A Way Increase The Height Of The Background Picture So It is Also The Background Of The Header? - Question | JoomShaper
Black Friday sale is live with flat 50% OFF. Sale ends soon! Grab your deal now!
Back to the questions

is There A Way Increase The Height Of The Background Picture So It is Also The Background Of The Header?

DA

Dina Abramson

SP Page Builder 3 years ago

Hi, I would like to have the backround picture in the first section to also be the background of the header and menu, but not the topbar.

i have tried numerous things with no success.

Can you help? i have attached a screenshot

https://abwddemo.com/images/sliderbackground.png

0
7 Answers
Order by
Oldest Newest Votes
Pavel
Pavel
Accepted Answer
3 years ago #57078

Hi. Replace this part

.com-sppagebuilder #sp-header.header-sticky {
    background-color: #fff;
}

to this

.com-sppagebuilder #sp-header.header-sticky {
    background-color: #fff;
    position: fixed;
}

Delete padding-top: 20px; padding-bottom: 20px;

On mobile view header height is 60px by default from template code. It is good size. Do not try to increase it. And in any case the using logo for this purpose is wrong way at all. Delete this code

.logo-image-phone {
    height: 100px;
}

Read this topic about css for header height https://www.joomshaper.com/forum/question/9639

0
Pavel
Pavel
Accepted Answer
3 years ago #57041

Hi. Try this code (will affect only on SP PB page type)

.com-sppagebuilder .sticky-header-placeholder {
    height: 0 !important;
}
.com-sppagebuilder #sp-header {
    position: absolute;
}
.com-sppagebuilder #sp-header.header-sticky {
    background-color: #fff;
}

Additionally, you need to enlarge padding-top in the first SP PB section, to compensate header height

0
DA
Dina Abramson
Accepted Answer
3 years ago #57057

do I put this in the custom code section of the template?

0
DA
Dina Abramson
Accepted Answer
3 years ago #57059

Hi,

I appreciate your help. I have added the code you suggested and attempted numerous things to make this work on mobile, to no avail.

I don't know how to make the text and image fit properly on mobile, as well as the header. I do not know what I am doing wrong.

Any assistance you can provide to make this display on mobile would be greatly appreciated.

Thank you in advance for your assistance.

0
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 3 years ago #57069

Hi

Could you please give me a screenshot of that mobile version issue?

-Regards

0
DA
Dina Abramson
Accepted Answer
3 years ago #57149

thank you. that worked

0
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 3 years ago #57275

Glad to know that:)

You are always welcome!

It would be very kind of you if you can manage some moment to give us feedback here:

https://extensions.joomla.org/extension/sp-page-builder/

https://www.trustpilot.com/review/www.joomshaper.com

Please let me know your name on the review. Thanks for being with us :)

0