I am working on a pricing page with 2 tabs (Monthly and Annual billing), and in both of them there is a hefty pricing table with dropdowns. On mobile I want to have the first row as sticky, so that users known the name of the plan for each feature.
The problem is that the sticky setting for this first row is not working in this specific tab. I have set overflow: visible on the tab container, but it’s still not working. Furthermore, I have even tested the whole table in another tab element, and is working there!!
The problem somehow seems to be related to this specific section/tab that I am working on right now. It is extremely frustrating :) I am guessing that it needs some custom code?
I am attaching a screenshot of the row and also adding the share-only link.
It seems like the issue with the sticky header not working within a specific tab may be related to how the tab content is handled in the layout. You could try adding custom CSS to ensure the sticky behavior is maintained even within the tab structure. Check that the position: sticky property is applied correctly, and consider adjusting the z-index to ensure the sticky header remains above other content. If the issue persists, you might need to tweak the container’s overflow properties or use JavaScript to reapply the sticky positioning dynamically when the tab is activated. If you need help with the custom code, feel free to reach out.
Somehow, I managed to make it work, but only on the mobile landscape. It stopped working on a regular mobile viewport without any changes made in Webflow.
This is extremely weird and I do not know if it is a bug or if somehow there is some Webflow code that influences this only on mobile portrait.
