Центр в пределах навигации

Question

Я не могу понять, как разрешить абсолютный центрированный логотип окружать мои навигационные ссылки (по три с каждой стороны), а для навигации падать ниже логотипа при изменении размера здесь: http://testsite.brentthelendesign.com/ , Я заранее извиняюсь, если на это ответят в другом месте. Любая помощь будет оценена!

Вот код:

LOGO CSS

h1.logo { 
    float: none; 
    left: 50%; 
    margin-left: -80px; 
    text-align: center; 
} 

h1.logo a { 
    background: url("images/logo.png") no-repeat scroll 0 0 transparent; 
    display: block; 
    float: none; 
    height: 127px; 
    text-align: center; 
    text-indent: -9999px; 
    width: 181px; 
} 

.abs { 
    position: absolute; 
} 

НАВИГАЦИЯ CSS

.nav { 
    position: relative; 
} 
#navigation ul li, #navigation ul li a { 
    border: medium none !important; 
    color: #3C3F40; 
    display: block; 
    float: right; 
    font-family: 'Fjord One',"Times New Roman",Times,serif; 
    font-weight: normal; 
    margin: 42px 0 130px !important; 
    padding: 15px 25px; 
    position: relative; 
    text-align: center !important; 
    text-decoration: none; 
    text-transform: uppercase; 
} 
#navigation ul li:hover a, #navigation ul li a:hover { 
    color: #D9A13B; 
} 
#navigation ul li:hover li a { 
    color: #D9A13B; 
    font-weight: normal; 
} 
#navigation ul li.active a { 
    color: #D9A13B; 
} 
#navigation ul.sub-menu { 

} 
#navigation ul.sub-menu li { 
    border: medium none; 
} 
#navigation ul.sub-menu li a { 
    background: none repeat scroll 0 0 transparent; 
    border-bottom: medium none; 
    border-radius: 0 0 0 0; 
    height: 32px; 
    line-height: 32px; 
    min-width: 210px; 
    padding: 5px 0 5px 8px; 
    position: static; 
} 
#navigation ul.sub-menu li a:hover { 
    border-bottom: medium none; 
} 

HTML:

<header class="sixteen columns"> 



<nav> 

    <h1 class="logo abs"> 
    <a href="/">Bound By Design</a> 
    </h1> 

    <div id="navigation" class="row sixteen columns"> 
     <div class="menu-header"> 

      <ul id="menu-primary-menu" class="menu sf-js-enabled"> 

       <li id="menu-item-40" class="menu-item menu-item-type-post_type menu-item- 
       object-page current-menu-item page_item page-item-4 current_page_item menu-item-40 active"> 
       <a href="http://testsite.brentthelendesign.com/">Home</a> 
       </li> 
       <li id="menu-item-41" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-41"> 
       <a href="http://testsite.brentthelendesign.com/category/tattoos/">Tattoos</a> 
       </li> 
       <li id="menu-item-42" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-42"> 
       <a href="http://testsite.brentthelendesign.com/category/piercings/">Piercings</a> 
       </li> 
       <li id="menu-item-60" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-60"> 
       <a href="http://testsite.brentthelendesign.com/aftercare/">Aftercare</a> 
       </li> 
       <li id="menu-item-58" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-58"> 
       <a href="http://testsite.brentthelendesign.com/category/news/">News</a> 
       </li> 
       <li id="menu-item-59" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-59"> 
       <a href="http://testsite.brentthelendesign.com/contact/">Contact</a> 
       </li> 
      </ul> 
     </div> 
    </div> 
    </nav> 
</header> 

Answer 1

Просто добавьте:

#navigation ul li:nth-child(3) { 
    margin-right: 213px!important; 
} 

к layout.css и он будет заботиться о проблеме логотипа.

также:

#navigation ul li, #navigation ul li a { 15px 0 26px 0 !important; } 

воли, чтобы избавиться от зазора между навигацией и «WELCOME»

Answer 2

Вот такой подход, который немного меньше зависит от вашего логотипа и ширины страницы:

#menu-primary-menu {width: 100%} 
#menu-primary-menu > li:nth-child(n+4) {float: right} 

Обратите внимание, что вам придется отменить порядок из 3 пунктов меню с правом плавания, поскольку они уложены справа налево.