Dynamically centering tabs on

[jeff_quade]

I have two separate sets of tabs on two separate pages and I would like to have them dynamically center and be able to change the color of the text and make it bold on the selected tab.
I have tried a few options from the forum such as

ul.nav-tabs {
padding-left: 24%;
}
This works sort of but it only pushes the tabs left and does not dynamically center them.

and

div.full-width-text div.spb_tabs_wrapper{text-align:center !important;}
.spb_tabs .nav-tabs{display:inline-block !important; }

This one seems to do nothing

[Mohammad – SUPPORT]

Hi,
Please provide me specific page url with tabs and attach a marked screenshot.
Thanks
Mohammad

[jeff_quade]

This reply has been marked as private.

[Mohammad – SUPPORT]

Hi,
Please remove your code and use this code:-

.spb_tabs ul.nav-tabs{
display: inline-block !important;
text-align: center !important;
margin: auto !important;
padding: auto !important;
}

Thanks
Mohammad

[jeff_quade]

This did nothing.

[Mohammad – SUPPORT]

Hi,
Please remove last code and use this new code:-

.spb_tabs ul.nav-tabs {
    display: inline-block !important;
    text-align: center !important;
    margin: 0px auto !important;
    padding: 0 4% !important;
}

Thanks
Mohammad

[jeff_quade]

Ok great. That worked for centering. Thank you.

The other part of my request was to be able to apply a color to the selected tab as well as change the color of the selected tab text.

[Mohammad – SUPPORT]

Hi,
Please use this custom css code:-

.spb_tabs .nav-tabs li.active a {
    border-bottom-color: transparent;
    color: #ff0000 !important;
    font-weight: bold !important;
}

Thanks
Mohammad

[jeff_quade]

I was able to change the text color. But when the text turns bold it pushes the tabs into a second line below. So that will not work.

How do i change the color of the selected tab?

So when someone selects a tab the tab itself should change to a specified color and also change the color of the text to a specified color.

[Mohammad – SUPPORT]

Hi,
Please remove last code use this custom css code:-

.spb_tabs .nav-tabs li.active a {
    border-bottom-color: transparent;
    color: #2A7FB6 !important;
    font-weight: bold !important;
    font-size: 13px;
    background:#eee !important;
}

Thanks
Mohammad