Move the Navigation of the Classic Tabs element to the Bottom

[connectifyme]

Hi!
I’m trying to move the navigation of the “Classic Tabs” element to the bottom (instead of the top or right/left).

Original

Desired

Using the following JS I can successfully move the navigation row in the DOM but it seems to break the navigation itself so clicking on the titles doesn’t change the tab.

jQuery(document).ready(function($){
    $('div.x-tab-content').insertBefore(‘ul.x-nav.x-nav-tabs.five-up.top');
});

Is there a better way of doing this or could this be accomplished with CSS instead of JS?
I am also open to recreating this type of content area with other elements if thats makes more sense.

Thanks!

[jade]

HI there,

You might get some ideas from here: https://stackoverflow.com/a/28159766 which is a CSS solution in reordering elements.

Hope this helps.

[connectifyme]

Thanks for the suggestion Jade, that approach actually worked perfectly!
For anyone stumbling on this in the future, I applied a custom class of “.tabs-nav-bottom” to the Classic Tabs element and added the following CSS to the page

.tabs-nav-bottom { display: table; }
.tabs-nav-bottom.x-nav-tabs { display: table-footer-group; }
.tabs-nav-bottom.x-tab-content  { display: table-header-group; }

Thanks again and have a great day!

[jade]

Glad to hear the suggestion helped and thanks for sharing the solution.

Have a great day as well!