Currently the code below is preventing me using position: sticky.
body {overflow-x: hidden}
On specific pages I have unset this and then position: sticky works.
Just wondering why you are using it and what the implications of using overflow-x: unset; on the pages where I want to use sticky positioning.
Hello @urchindesign,
.x-container.main for Ethos only has a :before pseudo-element that is used to create the white box that goes off to the left of the screen “infinitely.” This is an absolutely positioned element, which has a negative offset on top (e.g. top: -35px;) to ensure proper visual placement.
It is advise not utilize fixes at such a foundational level, like adjusting overflow on the body, or things of that nature. All of those foundational styles are there for a reason and should not be adjusted at any time on a person’s website as it creates compound issues later.
If you can share the page URL with this issue, we can check and see if there’s an alternative. Thank you.
We are using the integrity stack which has body {overflow-x: hidden} This is specifically the piece of CSS that seems to prevent position: sticky from working. The site is currently in development but you can literally recreate this issue on any site that has this setting.
We have a row with three columns. The center column is about 5 times longer than the left and right columns. For sizes above 768px we have applied flex to the row and the added position: sticky this should work but doesn’t. As soon we remove the body overflow then the code works.
I will load a test on another test site for you then you can see what I mean.
In the secure note I have provided details to a test site where you can clearly see the issue. The exact code works 100% provided body {overflow-x: hidden} is unset. It stops working if I don’t unset it. There are two sample pages I have created.
Hello @urchindesign,
Because the overflow is hidden, the sticky does not work. You must unset or make it visible again so that your sticky position will work.
body {
overflow-x: visible;
}
The code above is more appropriate than just unset.
Hope this helps.
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.