Scroll on offcanvas menu

[Karolis]

Hi everyone,

I’m experiencing an issue with mobile devices, my offcanvas menu doesn’t fit the screen height, and users are unable to scroll through the content. I’ve tried using recommendations by other posts to add overflow-y: scroll; and flex-wrap: nowrap; to brx-offcanvas-inner but it still doesn’t work. Any ideas? Thanks.

[timmse]

Hi Karolis,
Please share a live link.

[Karolis]

https://iservisas.eu/?bypass_code=zMRjQSGiyjYsPivX

[timmse]

Thanks!
In your case, it’s a bit tricky because you want to limit the height. We have to play a little trick here.

It’s best to remove all the styles you have applied so far, especially on the smaller breakpoints. All of the following instructions should be applied to the tablet-portrait breakpoint.

1. Set the height of brx-offcanvas-inner to “auto” (in the offcanvas settings)
2. Apply flex-wrap: nowrap to offcanvas-inner (directly on the element)

3. Remove the following styles (marked red) from offcanvas-inner and set the background-color to transparent (marked green)

4. Add a new block into offcanvas-inner and move every other element into it
5. Add the styles you removed in step 3 to the newly added block (background-color, border-radius, row-gap)

If you have done everything correctly and removed all existing styles, the offcanvas content should be scrollable without any problems.