Get tab titles to move position

[hypnorich]

I have used the classic tabs feature in the past and on small screens the tabs were stacked on top of each other and on larger screens the tabs were stacked to the left of the information panel for each tab.
I recently used the v2 tab element and couldn’t find any way of doing a similar set up. Have I missed something in the settings or will I have to use the classic element and forego the extra controls over the other parts of the element?

[tristup]

Hi @hypnorich,

We are really not clear about the setup you have done using the Classic Tabs, please remember that the V2 elements are much more updated than the Classic element and you can acheive what you have done with the Classic one. I would suggest you go through the following article which explains the V2 tab element.

Tabs | Themeco Docs

Hope it helps.
Thanks

[hypnorich]

Here is a video to show you what I mean… https://drive.google.com/file/d/1ETeyopx0HMEoukBPUiU5o5TziFfWomfj/view?usp=sharing

I want the functionality and increased control of v2 tabs but I don’t want people on small screens to have to scroll the tab header to find the box they want as I will guess most people won’t even know that there are additional boxes off screen

[prakash_s]

Hello @hypnorich,

To get rid of the scroll on the Tab you need to add this custom CSS under X—>Theme Option —>CSS

@media(max-width:766.99px){
.e17685-16 .x-tabs-list ul {
    display: block;
}
} 

The purpose of providing the custom CSS to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector.

Hope it helps.
Thanks

[hypnorich]

I wasn’t really asking for the scroll bar to be removed. It was more to see if there is a way to have the tabs on a small screen show up stacked one above the other with the content area underneath the stacked tabs.

Is there any way to move the tabs location on a version 2 setup?

[tristup]

Hi @hypnorich,

Regretfully, there is no such option in the Tabs element to show stacked One above One, even in the V2 element. You can try by using the Accordion element with the same content and make that visible only on smaller screens by Hide During BreakPoints and also make the Tabs invisible for those screen sizes.

Hope it helps.
Thanks.