title: Center logo with main menu appearing on each side
body: <p>I would like to center my logo and have my main menu appear on each side of the logo, I have no clue on how to do that, do I have to create two separate menus to achieve that layout?</p>
  
  <p>Any advice is much appreciated.</p>
  
  <p>Thank you!</p>
  
  <pre><code> &lt;header class="remove-padding"&gt;
      &lt;div class="container"&gt;
          &lt;div id="header" class="row"&gt;
              &lt;div class="four columns"&gt;
                  &lt;div id="logo"&gt;
                          &lt;img src=img/inf-logo1.png" alt="test site" /&gt;
                      &lt;/a&gt;
                      &lt;p class="slogan"&gt;Ink addiction&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="eight columns"&gt;
                  &lt;div id="headerWidgets"&gt;                
                                      &lt;/div&gt;
  
  
                                  &lt;nav id="nav-main" class="nav-main-right" role="navigation"&gt;
                      &lt;ul id="menu-main-menu" class="sf-menu"&gt;&lt;li id="menu-item-50" class="first-menu-item menu-item menu-item-type-custom menu-item-object-custom menu-item-50"&gt;&lt;a href="http://s.se"&gt;Home&lt;/a&gt;&lt;/li&gt;
  &lt;li id="menu-item-51" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-51"&gt;&lt;a href="http://a.se"&gt;about&lt;/a&gt;&lt;/li&gt;
  &lt;li id="menu-item-52" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-52"&gt;&lt;a href="http://s.se"&gt;tattoos&lt;/a&gt;&lt;/li&gt;
  &lt;li id="menu-item-53" class="last-menu-item menu-item menu-item-type-custom menu-item-object-custom menu-item-53"&gt;&lt;a href="http://.se"&gt;contact&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;               
                  &lt;/nav&gt;    
  
  
  #logo {padding:20px 0; float:left; overflow: hidden;  }
  #logo a {display:block; text-align: left; background:none; border:none; padding:0; margin:0;}
  
  .nav-main-right {float:right; position:absolute; bottom:0; right:4%;}
  .nav-main-full .sf-menu{float: left; width:100%; }
  
  .sf-menu, .sf-menu * {list-style:none; margin:0; padding:0}
  .sf-menu {line-height:1.0; float:left; font-size:14px; font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; text-transform: uppercase; letter-spacing:2px;  }
  .sf-menu ul {position:absolute; top:-999em; width:14em; text-transform: none; letter-spacing:normal; }
  .nav-main-full .sf-menu{float: left; width:100%; }
  .sf-menu ul ul {left:1em; margin-top:0;}
  .sf-menu ul li {width:100%; }
  .sf-menu li:hover {visibility:inherit}
  .sf-menu li {float:left; position:relative; padding-bottom:20px; line-height: 1em;}
  .nav-main-full .sf-menu li {padding-bottom:10px; padding-top:10px; }
  .sf-menu a {display:block; position:relative; text-decoration:none; padding: 0 1em; font-size:1em; border:none; background:none;}
  .nav-main-full .sf-menu a {padding: 0 1em;}
  .sf-menu .first-menu-item a {padding-left:0;}
  .sf-menu .last-menu-item a {padding-right:0;}
  
  .sf-menu a:hover, .sf-menu a:focus {background:none;}
  .sf-menu ul a {padding:.5em 1em !important;}
  .sf-menu li:hover ul,.sf-menu li.sfHover ul {top:100%; z-index:99}
  .nav-main-full .sf-menu li:hover ul ul, .nav-main-full .sf-menu li.sfHover ul ul { top:0;}
  .sf-menu a,.sf-menu a:visited {}
  .sf-menu li li { border:none; padding:5px 0px !important; }
  .sf-menu li li li { }
  .sf-menu li:hover,.sf-menu li.sfHover,.sf-menu a:focus,.sf-menu a:hover,.sf-menu a:active { outline:0}
  
  .sf-shadow ul{ }
  .sf-shadow ul.sf-shadow-off { background:transparent}
  ul.sf-menu li:hover li ul,ul.sf-menu li.sfHover li ul,ul.sf-menu li li:hover li ul,ul.sf-menu li li.sfHover li ul { top:-999em}
  ul.sf-menu li li:hover ul,ul.sf-menu li li.sfHover ul,ul.sf-menu li li li:hover ul,ul.sf-menu li li li.sfHover ul { left:14em; margin-left:2px; top:0}
  .sf-menu a.sf-with-ul {padding-right:   2.2em; min-width: 1px;}
  .sf-sub-indicator { position: absolute; display:block;right:1em;width:14px;height:14px;text-indent:-999em;overflow:hidden;background:url('../images/submenu.png') no-repeat;}
  a &gt; .sf-sub-indicator { top:0;}
  .sf-menu ul .sf-sub-indicator,.sf-menu ul a:focus &gt; .sf-sub-indicator,.sf-menu ul a:hover &gt; .sf-sub-indicator,.sf-menu ul a:active &gt; .sf-sub-indicator,.sf-menu ul li:hover &gt; a &gt; .sf-sub-indicator,.sf-menu ul li.sfHover &gt; a &gt; .sf-sub-indicator { top:0.5em;}
  .sf-shadow ul {-webkit-box-shadow: 0px 0px 3px 3px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 0px 3px 3px rgba(0, 0, 0, 0.2); box-shadow: 0px 0px 3px 3px rgba(0, 0, 0, 0.2); }
  .sf-shadow ul.sf-shadow-off { box-shadow:none; }
  </code></pre>