Streaming live at 10am (PST)

Arranging tab link vertically?


#1

I bet, there is a solution, but I – as a webflow newbie – don’t find it:
Is there a simple(!) way to re-arrange tab links in this way:


Any help appreciated! :slight_smile:


#2

Hey @mac_heibu absolutely there sure is a way. Flexbox is the answer.

Set the tabs element to a horizontal flexbox.
Set the tabs menu element to a vertical flexbox.

Adjust the styling as desired. These training materials will help if you need to learn more about flexbox in Webflow.

Hope that helps. Happy designing!


#3

Thank you for your help.
I intended to do exactly this, but what I get, is not what I intend to achieve (see the image in my initial post).
Yes, I am able to align the tab triggers vertically, but the tab pane alignes below the tab menu elements, and I can’t find a way to align it to the left/right of the tab menu.
Screen
(I must admit, I feel a little bit dumb …)


#4

It’s called learning and we all do it. We’re here on this forum to help each other and pass along knowledge.

Without a share link to your project, I can’t say for sure. But I think you missed one step.

This is the parent element of the tabs menu and tabs content. Making it horz flex will put the menu and content side by side.


#5

Thank you very much for your patience. Now I got it to work! Very helpful!


#6

My pleasure. Happy designing! :webflow_heart: