Hello, could someone explain, can I make a vertical tabs, like on picture?
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!
Thanks a lot! Only just one question, I can find how to change active tabs backgroud color. Could you explain?
UPD: I found it
Hello @thesergie, its really nice but in this way I think its not responsive?
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!
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.
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%.
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:
- How can I make the Tab Content centered, as it is being pushed by the Tab Menu on the left.
- 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.
It needs to work just like this site:
Thanks so much!
Hello @Arthur !
I updated the post with the read-only link.