Hi guys, I am new to the community and I hope that I’m doing it right asking here about an issue that I just had trying to create a Tabs element in my design.
I’d like to create something like this http://99ui-6.webflow.io/ but it seems that this design has a bug (maybe because of the lack of the Tab Content element!)
Can you help me? I really love the idea of creating a tab section where just a limited part slides!
You’re doing right, never hesitate!
So, step one, where you can see the structure of a tab element:
Step 2: we’ve added a DIV, put the Tab element inside, and added another div inside of it as a sibling of the tab element
Step 3: we have colored the sibling div in blue and gave it width 50%, we’ve gave the tab element width 50% and position:auto, and we’ve made the outer (parent) div Flexbox and position:relative
Now we select the tab menu element and give it position:absolute and corner top right
Now we add a padding top to the outer div so the menubar isn’t overlapping the content below
Let’s center the nav menu to mimick your example
That’s pretty much it. What we’ve done is define a reference for the opsition of the menu by giving the outer div position:relative and removing the position:relative property of the tab element, so we can move the menu bar around. Now you have your tab content with static content on it’s left.