Before

After

/*CSS for two row tab bar */
/* Two Row CSS - required */
.straightBarWrapper, .straightBarMouseOverTab,
.straightBarActiveTab, .straightBarNormalTab { background-repeat: repeat; }

/* CSS to stretch the tabs - optional */
.straightBarWrapperInnerTable { margin: 0 auto; width: 100%; }
/* min-width set to 100%/# of tabs in the top row (100%/8 = 12.5%) - optional */
.straightBarNormalTab, .straightBarActiveTab, .straightBarMouseOverTab { min-width: 12.5%; }

/*** This script will make your Nav Bar into two rows ***/
// This script will only make two rows
 var maxTabs = 8; // in top row
 
 // Don't change anything below
 var navbar = $('table.straightBarWrapperInnerTable');
 if (navbar.find('td').length > maxTabs) {
  navbar.find('td:gt(' + (maxTabs-1) + ')')
   .wrapAll('<tr />').parent().appendTo( navbar );
  // set to 80px (twice the background image height)
  navbar.parent().andSelf().height(80);
 }

• CSS
  • Only the first part of the CSS is required to add the nav bar background image to both rows.
  • The rest of the css is optional. The second line of CSS makes the nav bar stretch all the way across the page.
  • The last line of CSS makes each tab equal in size. Notice the comment with the math (ewwww)... so if you have 8 tabs in the top row, take 100% divided by 8 which equals 12.5% (in red).

• Script
  • There is only one setting for the script... maxTabs, the maximum number of tabs in the top row (in red).
  • Because the Nav bar is a table, the second row tabs have to line up with the tabs above, so the second row will be aligned to the left and the tabs will be the same size as the ones above.

/*** This script will make your Standard Tabs into two rows ***/
// This script will only make two rows
 var maxTabs = 8; // in top row
 
 // Don't change anything below
 var navbar = $('table.TabBar');
 if (navbar.find('td').length > maxTabs) {
  navbar.find('td:gt(' + (maxTabs-1) + ')')
   .wrapAll('<tr />').parent().appendTo( navbar );
 }

"      ].random() 

1 3 5 7
 2 4 6

1 2 3 4
 5 6 7