I have a sticky header that when scrolled the top part of it moves up and the rest stays at the top.
Using this CSS.
.scrolling {
transform: translateY(-40px);
}
On doing this it creates a large horizontal scrollbar as you can see in the video.
If I disable the offcanvas cart this doesn’t happen.
Not sure if this is a bug or I need to do this another way but any help would be appreciated, thanks.
I don’t think it’s a bug. But what if you add overflow:hidden; to one of the wrapping divs to see if that does. You can also try this to find overflowing elements:
I tried adding overflow: hidden but that doesn’t seem to do anything and adding a border to the offcanvas element doesn’t show (unless opening the cart).
Strangely when I open devtools, there is no horizontal scrolling so there’s nothing to inspect.
Also when I open the cart, it doesn’t close by clicking anywhere else on the screen apart from the header.
For now I’ll just disable the scrolling header and hopefully someone can replicate to find a fix.
You can try using a negative margin instead of the transform - this may work.
If not, the easiest way is to outsource your top-bar to a section template, and apply a „bricks_before_header" condition. Then you can do without the transform, your section scrolls “naturally” out of the viewport, your header is still sticky and the cart offcanvas still works.
Since the offcanvas is also located in the header, its position is destroyed by the transform causing the whole header to break.
Thanks for the help Timmse, I’ve gone with your second suggestion and moved the top section to another template. Doesn’t have the same feel but it’s a good workaround for now.
