NO BUG: Offcanvas widget moves along slide up header

Bugs
1

Browser: Chrome 114
OS: Windows
URL: Try Bricks – t7b3ff1b

Hi team.

If we add the Offcanvas widget in the header and the header is sticky, if we use the Slide up after (px) option, Offcanvas will be hidden in the front end after scrolling.

To better understand this problem, please see this link. Then Open Offcanvas. Then scroll the page. After some scrolling, Offcanvas will be hidden. Again, if you scroll up the page, Offcanvas will appear.

This also applies to Megamanu.

2

Hi Hosein,
Thanks so much for your report!

Unfortunately, this cannot be prevented since the entire header is transformed upwards.
If you want to use the slide-up setting, place the offcanvas element somewhere else.

Best regards,
timmse

1 Like
3

Hi, you need to add the class no-scroll to the body with js, and remove on close

to avoid the scroll jumping you need to add css:

html {
padding-right: calc(17px - (100vw - 100%));
}

another recomendation is to customize the scrollbar to fix the width (17px in the example) for all the browsers.

I think is a bug, so hope they fix it soon (this take me two days of research)

cheers :wink:

1 Like
4

Hi again @timmse,

The only perfect solution to this problem is to put the toggle in the header, but put the offcanvas content in the footer(to be displayed on all pages). So when scrolling, the offcanvas content is displayed without problems.

Doesn’t this solution create a problem in terms of structure?

5

In what way? It doesn’t matter where the offcanvas element is located in the HTML as long as it is clearly identifiable and accessible. And it is.

1 Like