is there a way increase the height of the background picture so it is also the background of the header? - Forum | JoomShaper
Solved SP Page Builder

is there a way increase the height of the background picture so it is also the background of the header?

Asked by Dina Abramson 4 years ago Last activity 4 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

Accepted answer

Marked as the solution
Pavel
4 years ago · edited

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

6 more replies

Oldest first Newest first Most helpful
Pavel
4 years ago · edited

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

Dina Abramson Asked this
4 years ago

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

Dina Abramson Asked this
4 years ago

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.

Mehtaz Afsana Borsha Staff
4 years ago

Hi

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

-Regards

Dina Abramson Asked this
4 years ago

thank you. that worked

Log in to reply.