1. If you want the code to do the above to the nav bar, then I will provide it.
2. Reduce the size of the tab bar, using this css (add it to Control Panel > Custom HTML & Script > Custom CSS > CSS Additions to Standard):
   
   .straightBarNormalTab, .straightBarFirstTab, .straightBarMouseOverTab {
    font-size: 80%;
    width: 50px !important;
    min-width: 50px !important;
    padding: 3px 1px !important;
   }
   
   
3. You could combine some tabs so there are less.
4. I've helped someone add this side menu to their site... but I can't seem to find that post right now.
5. Or replace the tab bar with a menu that has sub menus, like SuperFish - I will have to work on how to add this if you want this option.

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.