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.
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
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.
