Sticky positioning with tabs nested within tabs


I have a set of tabs nested within another set of tabs. When the page scrolls down I want the tabs menus to stick to the tab of the page (similar to a sticky navbar).

I have no problem applying sticky positioning to the Level 1 (parent) tab menu, but the Level 2 (child) tabs menu doesn’t want to stick on the page. When I apply sticky positioning to the Level 2 menu, it just moves within the container but does not stick at all when scrolling.

I created a demonstration of the issue here: Webflow - Ailsas test project

Could anyone help please? :pray: :slightly_smiling_face:

Sticky positioning can as it doesn’t work when a parent element has the overflow: hidden style property. Since this is the default style applied to the tab content element, this would prevent the actual element from “sticking” as it should:

You can change the “Level 1 content” to overflow: visible and the second sticky element will work as expected but I can’t say whether or not this would have an adverse affect on your tab functionality down the road.

I’d recommend giving that a try first to see how it works :+1:

Hi @mikeyevin, thanks so much for this! Problem solved! fortunately functionality within the tabs is fairly simple so hopefully will see no repercussions down the line.

Thank you!!

1 Like