SOLVED: Sticky header: Website breaking out horizontally

Hi there,

I noticed on all my bricks websites, that the page is breaking out horizontally on mobile devices when the sticky header is active.

Here a demonstration:

Hi @jenteck,

Yup, you’re right I’m able to replicate the issue on your site. However I couldn’t replicate this locally, so I wonder if it has something to do with the off-canvas element that you have. Which I’m guessing is not the native off-canvas element from Bricks right? Can you maybe try removing it and see if the issue is stemming from it?

Let me know how it goes :slight_smile:

Hi charaf,

I originally had the bricks one. It also happened there so I tried the off-canvas from Bricks Extras.
My header is built simple so I couldn’t figure it out.

You see the same on another site:

Hi @jenteck,

Yeah, you’re right, I see the same behavior on the second site. However, I tried replicating the same setup (sticky header & off-canvas element from the right) and I didn’t face the same bug. So I’m still not sure what’s causing it on your setups exactly.

Is it possible for you to share temporary admin access to one of the sites where this is happening (preferably a staging one)? You can share the credentials to help@bricksbuilder.io with a link to this forum thread so we can investigate this further.

I’ve sent the mail :raising_hand_man:

Thank you for sharing access. Although I couldn’t replicate the bug on iOS, after multiple swipes using the browser’s simulator I can see the issue for a split second. And it only happens when there’s a sticky header and a mobile nav menu. I have created an internal ticket to investigate this further and see what can be done :slight_smile:

Yes, iOS does not suffer from this issue. I tested with Android - Firefox and Chrome. Both have these issues. Other websites of mine built with other page builders do not have this problem - just for the protocol.

Hey there!

I’d like to add to this issue, not sure if it’s the same issue, as I can’t see the other recordings, but I have some horizontal problems with Off Canvas + Sticky Header.

As you can see on this image, using this structure + sticky header, causes problems with the backdrop/overlay. Also with this same setup, there is a flicker in the layout whenever I open the Off Canvas.

When loading the page, horizontal scroll appeared (needed to add overflow-x:hidden to html,body). In some rare occasions, the whole website will be loaded, slightly shifted to the left (Chrome).

To solve this problem, the Off Canvas needs to be out of those containers, and without any parent in the header.

Hope this helps the Devs, and provides a solution for someone facing the same issue!

Hey @frussane,

this seems to be a different issue, so, would it be possible if you can open a new topic for this (and you can also link to this one) also please record a video explaining and showing how to reproduce it, so that I’ll know what to do.

Additionally, if you can paste the structure to you new topic, that would be great - so I can test on the same structure as you.

You can also tag me in the new topic, to make sure I’ll see it :slight_smile:

Thank you,
M

Hi @jenteck,

can you check if this is still happening in the 1.11 beta version? Because the 1.11 beta contains some sticky header fixes.

Please let me know. Thank you!
Matej

Hi Matej,

sorry for the late response, it seems to be fixed!

Perfect, thanks for your response! I’m glad that it’s solved now :slight_smile:

Matej

1 Like