SOLVED: Sticky Header (sticky on scroll + slide-up) causes overflow

Bricks Version: 1.4
Browser: Chrome 90
OS: Android/Windows
URL: video.webm - Support

If “Slide Up After (Px)” is enabled and the header is hidden when scrolling down on the smartphone and desktop, the body widens by x pixels and you can scroll to the right.

bricks-1

Hi Claudio,
Thanks for reaching out!

This looks more like an overflow issue than a problem with the setting.
Can you provide a link so I can take a look at the source code?

Best regards,
timmse

Hi timmse

I have now noticed that this happens when “Sticky on Scroll” is enabled. I’m pretty sure it’s not caused by the content if you mean that with the overflow.

Thank you!
Best regards,
Claudio

Hi Claudio,
Thanks for the link!

I guess this is caused by the language switcher, as you can see in the attached screenshot.
Please add the following custom CSS to the nav menus custom CSS field:

.brxe-nav-menu .bricks-nav-menu .sub-menu {
right: 0;
}

Let me know if this fixes the problem.

Btw, at the bottom of “Kontakt” you have negative padding on the divider, which also creates an overflow:

Hi timmse

Thanks for the overflow hint on the separator. I have adjusted that. :slight_smile:

After the CSS properties did not help, I have removed the language switcher from the menu. The problem still remains. And again, as a note, the problem only appears when “Sticky on Scroll” is enabled.

Hi Claudio,
what happens if you disable “Sticky on scroll”? Sticky on scroll seems to cause the problem as it adds position: sticky (sticky is always tricky). However, since the menu should not be sticky, but should slide out of the viewport, the option has no added value anyway.

If I disable “Sticky on Scroll” (I just did) then the hero area slides under the header. I have to add margin on all sites to compensate this.

But it fixes the initial problem, right? If so, we have a starting point to fix the problem :wink:

Yes that’ s how it is. I am also aware that I can work around in that way. But the question is, is it a bricksbuilder bug or not? :slight_smile:

Ok, we need to see if we can fix this in general.
Instead of setting a margin top on every page, you can also do that in the content tab of the theme styles:

image

1 Like

Ok, didn’t see the content tab and added the margin there now. Thank you very much.
I can live with that for now. :slight_smile:

1 Like

Ok, let’s consider this as solved for now. I think the content margin settings is meant for exactly this purpose :slight_smile:

Hi, I am not sure this can be considered “solved”; it just happened to me as well and I could easily reproduce it in my sandbox.

It occurs when the header is set to “sticky on scroll” and the mobile menu position is set to “Right”. The overflow scrollbar also appears for larger viewports, where the mobile menu shouldn’t be relevant anyway.

Hi Niko,
Welcome to the forum and thanks for reaching out!

I’ve tested it again with the recently released Bricks 1.5beta and cannot reproduce the issue with “sticky on scroll” and mobile menu position set to “right”. The try.bricksbuilder installation still uses Bricks 1.4.0.2. Let’s wait and see if someone reports this with 1.5beta.

Best regards,
timmse

1 Like

Hi timmse,

I’m afraid it’s not solved after all.

I just tried 1.5RC2 for the first time and could easily reproduce this on a blank install.

Sample Page – Report Car Please note the horizontal scrollbar at the bottom appearing as you scroll down.

This happens when the following is true:

  • position of the mobile menu is set to “right”
  • the header is set to “Sticky Header” + “Sticky on Scroll” + a value is entered in the “Slide up after (px)” field.
  • the window width is not too wide (in the above example it stops happening at a width of 2150px and above)

I think this should be investigated further and fixed.

1 Like

Hi, thanks for these thread. I also have this problem.
If just “Sticky header” is checked, is works fine. But i need “sticky on scroll”, and after checking this, the scrollbar apears. Like @Claudio and @Niko_S explained.

Hope that can be fixed.

HI all. I’m having the same issue. Started building the site I’m working on in Bricks 1.5RC1 or beta (don’t remember), then updated to 1.5RC2, and now to 1.5 official release. The problem still exists.

@timmse maybe change the state from solved to… wip :joy:

Maybe a solution?

#brx-header.sticky {
  overflow: hidden;
}
1 Like

This solves it! Thank you so much! I’m not sure why I haven’t tried it myself…