Streaming live at 10am (PST)

How to create vertical tabs?


#1

Hello, could someone explain, can I make a vertical tabs, like on picture?


#2

Here's how to do it.

Select the Tabs Menu element, give it a class, give it Float: right and a percentage width like 25%.

Select the Tabs Content element, give it a class, give it Float: left and a percentage width like 75%.

Select the Tab Links elements, give them all the same class, and make sure they are 100% width of the Tabs Menu.

Hope this helps!


#3

Thanks a lot! Only just one question, I can find how to change active tabs backgroud color. Could you explain?

UPD: I found it smile


#4

Hello @thesergie, its really nice but in this way I think its not responsive?

http://tarsos.webflow.com/servicios

Thanks


#5

To make it responsive, go to your iPad viewport and make those buttons display: block. They will become full width. Let me know if this helps!


#6

Hi @thesergie,

I tried but didn´t work. Probably I didn´t well. What I did: Give to the Tabs Content the float: None, leaving the tabs menu up and then 100% to the tabs link class.

Rafa


#7

Oops sorry! I forgot that I had some floats set on the tabs elements in the desktop view. To make it stack on top in tablet you have to set it up like this:

Select the Tabs Menu element class and give it Float: none and a percentage width 100%.

Select the Tabs Content element class and give it Float: none and a percentage width like 100%.


#8

Hello @thesergie, my first post here!

I'm looking to implement a vertical tab just like the example, I managed to set it up but I have a couple of issues:

1) How can I make the Tab Content centered, as it is being pushed by the Tab Menu on the left.
2) I need the veritical tab to be ideally fixed. However if I set it to fixed, the Tab Content will go on top of it.

Link to site:
https://preview.webflow.com/preview/wolf-hunt-clothing?preview=bd698c538ee721440f94f39c50e99b5e

It needs to work just like this site:
http://stonedimmaculatevintage.com/collections/all

Thanks so much!


#9

Hi @renegdn, can you give us your read only link?

Thanks!

Arthur


#10

Hello @Arthur !
I updated the post with the read-only link.

Thanks,

®


#11