Position Sticky Bug In Helix Ultimate 2.1.3 - Question | JoomShaper
SP Page Builder 6 is Here! Learn More →
Back to the questions

Position Sticky Bug In Helix Ultimate 2.1.3

A

Alvaro

Helix Framework 2 months ago

Until version 2.1.2, when Position Sticky was enabled on sidebars (left or right positions), it worked correctly from 992px up, which is when the left or right sides of the component were positioned. However, when the resolution was lower than 991.98px, the bar stopped sticking, which was fine.

After updating to 2.1.3, the bar continues to activate even on phones, rendering the site unusable because it cannot be navigated. I have tested it locally with Firefox and Chrome.

To reproduce this bug, simply enable Position Sticky, open Developer Tools, or open the responsive viewer on a mobile device. You will see that everything is unusable at resolutions lower than 992px.

Regards

0
4 Answers
Order by
Oldest Newest Votes
TD
TOCHTERMANN DAMIEN
Accepted Answer
2 months ago #200901

Kindly share your web along admin access .

0
Atick Eashrak Shuvo
Atick Eashrak Shuvo
Accepted Answer
Support Agent 2 months ago #200904

Hello Alvaro,

Sorry for the inconvenience you're experiencing. The sticky behavior change in Helix Ultimate 2.1.3 (see changelog: prnt.sc/rbj5DCmMAAvo) was implemented due to requests for it to apply to screens narrower than 992px.

If you'd like to disable this behavior on screens narrower than 992px on your site, please provide your site URL, and I'll provide you with custom CSS to address it.

Looking forward to your response.

Best regards

0
A
Alvaro
Accepted Answer
2 months ago #200994

Hi there. Of course, the changelog says they fixed the behavior on screens smaller than 992px, and if you watch the video, I don't think it's fixed, but rather worsened, because you can see how the sidebar overlaps the component's content. In my opinion, it's gotten worse. Video: https://app.screencast.com/bSMYuPOXkG21h

Regards

0
Atick Eashrak Shuvo
Atick Eashrak Shuvo
Accepted Answer
Support Agent 2 months ago #201036

Please add the following CSS code to your Template Options -> Custom Code -> Custom CSS

/* Disable sticky behavior on screens smaller than 992px */
@media (max-width: 991.98px) {
    /* Override sticky positioning for left sidebar */
    #sp-left .sp-column {
        position: relative !important;
        top: auto !important;
        transform: none !important;
        left: auto !important;
        width: auto !important;
    }

    /* Override sticky positioning for right sidebar */
    #sp-right .sp-column {
        position: relative !important;
        top: auto !important;
        transform: none !important;
        left: auto !important;
        width: auto !important;
    }

    /* Remove sticky wrapper styles */
    #sp-left .sp-column .inner-wrapper-sticky,
    #sp-right .sp-column .inner-wrapper-sticky {
        position: relative !important;
        top: auto !important;
        transform: none !important;
        left: auto !important;
        width: auto !important;
    }

    /* Remove sticky class effects */
    #sp-left .sp-column.is-affixed,
    #sp-right .sp-column.is-affixed {
        position: relative !important;
        top: auto !important;
        transform: none !important;
        left: auto !important;
        width: auto !important;
    }
}
0