Tabs should not wrap

Hi All

We are using NITRO theme NOP 3.4.
We don't want Tabs to be  moved to second line (should not Wrap)

Example

Tabs should display like this
Membership       Professional        Consumer            Overview             Specifications     Contact
    Offers                  Reviews             Reviews                                                                        Us

Not Like this
Membership Offers   Professional Reviews     Consumer Reviews    Overview      Specifications  

Contact Us

Here Contact Us tab has moved to Second line which we don't want.

How can this be controlled so that TAB elements are only should in one line.

Thanks in advance

Hello there,
To achieve the effect you want you need to make some style changes. I`ll help you with this so don`t worry about it.
First you need to limited the cells width to desirеd value (the tab navigation buttons).
You can set this here:
~Themes/Nitro/Content/CSS/480.css
In the file 480.css find this code:

.ui-tabs .ui-tabs-nav li{
    float: left;
    margin: 0 2px 0 0;
}

In here you must add max-width style - something like this but maybe with other value bigger than 150px, it depends of you:

.ui-tabs .ui-tabs-nav li{
    float: left;
    margin: 0 2px 0 0;
    max-width:150px;
}

By adding only this style the tab navigation will looks not very good. Maybe you need to try adding the following styles and see what`s happen than.
Again in the same line of code like the upper one, add the bold styles:

.ui-tabs .ui-tabs-nav li{
    float: none;
    display:inline-block;
    margin: 0 2px 0 0;
    max-width:150px;
}

The result here must be tabs standing one line. But here the issue is that some of the tabs are higher than the others and if they drop to second line it might not looks great.
That`s the reason why the design is those tabs not to drop to second line.

There is one more think you can do, that it might works.
In the file 480.css find :

.ui-tabs .ui-tabs-nav li a{

}

And add this styles:

.ui-tabs .ui-tabs-nav li a{
 display: table-cell;
 height: 50px;
 max-width: 130px;
vertical-align:middle;
text-align:center;
padding:0 5px;
}

I hope that will help.  
  

Thanks a lot.
Really appreciate your help