Sticky Header - Question | JoomShaper
🎃 Halloween Sale is Live! Get 35% OFF on all plans. Sale ends soon! Get Offer

Sticky Header

D

Domberg

SP Page Builder 4 months ago

Hello everyone,

I'm asking for help with the sticky header.

So far, everything's working as described, see www.streuobstwiesen-boerse.de. The header stays stuck at the top as desired. Now I'd like to ensure that the advertising banners defined in a module via a section also stay stuck at the top.

Is this possible, and if so, what do I need to configure and where?

Thank you in advance! Jürgen Domberg

I'm using SP Page Builder Pro in the following configuration: Joomla 5.3.1 - Helix Ultimate 2.1.2 - SP Page Builder Pro 5.6.1

-1
14 Answers
Rashida Rahman
Rashida Rahman
Accepted Answer
Support Agent 4 months ago #196431

Hi there!

Thanks for reaching out.

There is no default option to make another section as sticky. In that case you will need some CSS code to achieve this. Please share a screenshot indicating the section you are talking about.

Best regards,

0
D
Domberg
Accepted Answer
4 months ago #196436

Thanks for the quick response. Look here: https://www.streuobstwiesen-boerse.de/images/sticky_header.png

0
Rashida Rahman
Rashida Rahman
Accepted Answer
Support Agent 4 months ago #196541

Hi,

Thanks for the screenshot.

Please use the following code in your custom CSS:

.body-innerwrapper {
        overflow: visible;
    }
#section-id-caba3cbe-b5ae-4998-bda7-daa38b7d415d {
    position: sticky !important;
    top: 80px;
    z-index: 99 !important;
}

Here is all about custom code placement in Helix Ultimate: https://www.joomshaper.com/documentation/helix-framework/custom-code-css-js-meta

Hope this will serve your purpose.

Best regards,

0
D
Domberg
Accepted Answer
4 months ago #196563

Hi,

thanks - it worke great. But only on the HOME-Page. What I have zo do so that it works on evry site?

Best regards,

0
Rashida Rahman
Rashida Rahman
Accepted Answer
Support Agent 4 months ago #196640

Hi,

You're welcome.

How did you render this banner, actually? It will be better if you create it as a module, then publish it in the desired position and set menu assignments for all. This way the banner can be sticky with a single block of custom CSS. But it seems you have created the banner for each page as a new section or content instead; hence, each page has a unique ID for that section.

Best regards,

0
D
Domberg
Accepted Answer
4 months ago #196672

Hi,

Thank you again. I have now created two module positions (Banner 1 and Banner 2) and placed them directly below the module position "Title".

For testing purposes, I then assigned my modules with the banners on the page https://www.streuobstwiesen-boerse.de/anzeigen/baden-wuerttemberg/kreis-calw.html to these positions. It's working so far.

Could you please provide me with the necessary CSS code to make it sticky?

Best regards,

0
D
Domberg
Accepted Answer
4 months ago #196684

Hi,

for your information, For testing purposes, I have assigned my modules with the banners on all subpages. It's working so far.

Could you please provide me with the necessary CSS code to make it sticky?

Best regards

0
D
Domberg
Accepted Answer
4 months ago #196868

Hi,

just a short reminder

Could you please provide me with the corresponding code? That would be great.

0
Rashida Rahman
Rashida Rahman
Accepted Answer
Support Agent 4 months ago #196878

Hello,

Thanks for the fixed section for your all pages. Please try this new code snippet instead of the old:

.body-innerwrapper {
        overflow: visible;
    }
#sp-werbebanner-oben {
    position: sticky !important;
    top: 80px;
    z-index: 99 !important;
}

Best regards,

0
D
Domberg
Accepted Answer
4 months ago #196885

Hi,

great job.

One small thing: When using the code, a small white square is added to the breadcrumb line. Can this be removed?

Thanks

0
Rashida Rahman
Rashida Rahman
Accepted Answer
Support Agent 4 months ago #196892

Sorry for this. please try the below code too:

.sp-page-builder .page-content {
    overflow: hidden;
}
0
D
Domberg
Accepted Answer
4 months ago #196907

Thats it - thank you so much

0
Rashida Rahman
Rashida Rahman
Accepted Answer
Support Agent 4 months ago #196908

You're always welcome:)

You may accept the most useful answer in order to close the post.

Have a nice day!

0
Rashida Rahman
Rashida Rahman
Accepted Answer
Support Agent 3 months ago #196960

Thanks for accepting the answer:)

0