Staff replied Helix Framework

Position Sticky Bug in Helix Ultimate 2.1.3

Asked by Alvaro 1 year ago Last activity 1 year 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

4 replies

TOCHTERMANN DAMIEN

1 year ago

Kindly share your web along admin access .

Atick Eashrak Shuvo Staff

1 year ago

Hello Alvaro,

Sorry for the inconvenience you're experiencing. The sticky behavior change in Helix Ultimate 2.1.3 (see changelog: https://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

Alvaro Asked this

1 year ago

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

Atick Eashrak Shuvo Staff

1 year ago

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;
    }
}