Adjust navigation menu to fit an additional button

Question

I need help adding an additional nav button to my sites main navigation bar. This is a Woo Wordpress theme if that helps. Have tried changing the padding in css to no avail. When I add my new nav button titled 'Partners' the last menu item drops down to a second line, which doesn't look the best.

This is my URL: http://kumbayah.com.au/

This is my nav css:

/* 2.2 Navigation */
#navigation{font:14px/14px sans-serif;border-top:10px solid #dbdbdb; border-bottom:5px solid #dbdbdb;padding:15px 0; margin-bottom:30px;}

#navigation ul.rss{background:url(images/ico-rss.png) no-repeat right 5px;padding:1px 6px 3px 0;margin-right:10px;}
#navigation ul.rss li{display:inline;padding:0 10px 0 0;}
#navigation ul.rss li a{color:#c63f00;text-decoration:none;}
#navigation ul.rss li a:hover{text-decoration:underline;}

.nav { z-index:99; margin:0; padding:0; list-style:none; line-height:1; margin-left:10px; }
.nav a  { position:relative; color:#555; display:block; z-index:100; padding:5px 10px; line-height:18px; text-decoration:none; }
.nav li a:hover, .nav li.current_page_item a, .nav li.current_page_parent a, .nav li.current-menu-ancestor a, .nav li.current-menu-item a, .nav li.current_page_item li a, .nav li.current_page_parent li a, .nav li.current-menu-ancestor li a, .nav li.current-menu-item li a, .nav li.sfHover a { background:#eee; }
.nav li li.current_page_item { background:none; }
.nav li  { float:left; width: auto; }
.nav li a.sf-with-ul { padding-right:20px; }
.nav li ul li a  { text-shadow:0 1px 0 #fff; }
.nav li ul li a { border-radius:0;-moz-border-radius:0;-webkit-border-radius:0;}
.nav a, .nav li.current_page_item, .nav li.current_page_parent, .nav li.current-menu-ancestor, .nav li.current-menu-item, .nav li.sfHover, .nav li.selected { border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;}

/* 2.2.1 Drop-down menus */
.nav li ul  { background: #FFF; position: absolute; left: -999em; width: 180px; border: 1px solid #dbdbdb; border-width:1px 1px 0; z-index:999; }
.nav li ul li  { background:#eee; border-top:1px solid #fff; border-bottom:1px solid #dbdbdb;}
.nav li ul li a  { width:160px; color:#555; font-size:0.8em; line-height:18px; }
.nav li ul li a.sf-with-ul { padding:5px 10px; }
.nav li ul li a:hover, .nav li.sfHover ul li a.sf-with-ul { background:#eaeaea;}
.nav li ul ul  { margin: -30px 0 0 180px; }
.nav li ul ul li a  {  }
.nav li ul li ul li a  {  }

.nav li:hover,.nav li.hover  { position:static; }
.nav li:hover ul ul, .nav li.sfhover ul ul,
.nav li:hover ul ul ul, .nav li.sfhover ul ul ul,
.nav li:hover ul ul ul ul, .nav li.sfhover ul ul ul ul { left:-999em; }
.nav li:hover ul, .nav li.sfhover ul,
.nav li li:hover ul, .nav li li.sfhover ul,
.nav li li li:hover ul, .nav li li li.sfhover ul,
.nav li li li li:hover ul, .nav li li li li.sfhover ul  { left:auto; }

.nav .sf-sub-indicator {background: url(images/arrow-superfish.png) no-repeat;position:absolute;display:block;right:0.4em;top:40%;width:10px;height:10px;text-indent:-999em;overflow:hidden;}
.nav li ul .sf-sub-indicator {background:url(images/arrow-superfish-right.png) no-repeat;}

/* 2.2.2 Top Navigation (optional) */
#top { background: #000; }
#top .nav { margin:0; }
#top .nav a { color:#ddd; padding:8px 10px; line-height:18px; text-decoration:none; text-shadow:none; }
#top .nav li  {  }
#top .nav li a.sf-with-ul { padding-right:20px; }
#top .nav .sf-sub-indicator { top:40%; }

#top .nav a:hover, 
#top .nav li.current_page_item a, 
#top .nav li.current_page_parent a,
#top .nav li.current-menu-ancestor a,
#top .nav li.current-cat a,
#top .nav li.current-menu-item a,
#top .nav li.sfHover a { background: #222; border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;}

#top .nav li ul  { background: #222; margin:0; padding:0px; width: 180px; border: none; z-index:999;
    /* Box Shadow */
    -moz-box-shadow: 0 2px 2px rgba(0,0,0,.1);
    -webkit-box-shadow: 0 2px 2px rgba(0,0,0,.1);
    box-shadow: 0 2px 2px rgba(0,0,0,.1);
}
#top .nav li ul, #top .nav li ul li:last-child a {
    /* Border Radius */
    border-radius: 0 0 4px 4px; -moz-border-radius: 0 0 4px 4px; -webkit-border-radius: 0 0 4px 4px; 
}
#top .nav li ul li { background:none; border:none; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); }
#top .nav li ul li a  { padding:8px 10px; width:160px; color:#ddd; background: none; font-size:0.9em;}
#top .nav li ul li a:hover  { background: #000; }
#top .nav li ul li a.sf-with-ul { padding-right:10px; }
#top .nav li ul ul  { margin: -34px 0 0 180px; }

#top .nav li:hover, #top .nav li.hover  { position:static; }
#top .nav li:hover ul ul, #top .nav li.sfhover ul ul,
#top .nav li:hover ul ul ul, #top .nav li.sfhover ul ul ul,
#top .nav li:hover ul ul ul ul, #top .nav li.sfhover ul ul ul ul { left:-999em; }
#top .nav li:hover ul, #top .nav li.sfhover ul,
#top .nav li li:hover ul, #top .nav li li.sfhover ul,
#top .nav li li li:hover ul, #top .nav li li li.sfhover ul,
#top .nav li li li li:hover ul, #top .nav li li li li.sfhover ul  { left:auto; }

Any and all help would be wonderful.

Thanks

Answer 1

Your problem is with this line:

.nav li  { float:left; width: auto; }

Auto width usually works pretty well but in tight areas might be problematic, as you've noticed. The simple solution is to set the width to either accommodate each li item according to its actual width or simply set the width to 11% as follows:

.nav li  { float:left; width: 11%; } 

I've tested 11% on your site and it works and looks fine to me. I would suggest optimizing it so each item has its own width according to how wide it actually is.

Good luck!