-
I want to make the accordion “Daftar isi” here to be sticky.
Setting the accordion block > position > sticky with top 50px still not working in the published page.
Even though at the gutenberg editor showing sticky behaviour.Any ideas?
-
Hi there,
A sticky element requires a parent container with sufficient height for it to stick within. In this case, the parent container (.gb-element-fdd5a06c) is only as tall as the accordion itself, so position: sticky has no effect.
Alternatively, you can place the accordion in a separate Sidebar element. Once that’s done, we can apply CSS to make it sticky.
-
but if you see here, the parent container (.gb-element-fdd5a06c) is taller than the sticky accordion. Still the sticky has no effect.
-
Visually it looks that way, however you can clearly see the container height in the browser inspector. See this screenshot: https://cln.sh/gJTXmdmglx0lHMT2JtHk
-
Should I make another container inside the column to make the sticky works?
-
Try adding this CSS:
body { overflow-x: auto !important; } -
Added the CSS, still no effect🥲
-
Could you try moving the Grid block out of its wrapper Container (gb-element-7e6aac2a) so that the Grid block becomes the parent container?
-
Still unlucky Alvind.
But then I asked Gemini what might be the culprit, it’s
overflow: hidden;autoorscroll. Found it in the Customizer > Additional CSShtml { overflow-x: hidden; }Since I need that for a quick fix on certain page, I’ll make a custom hook instead.
Thanks Alvind & Ying
-
No problem, let us know if there’s anything else you need help with.
- You must be logged in to reply to this topic.