导航中心

我似乎无法弄清楚如何让绝对中心的徽标被我的导航链接（每边3个）包围，并且导航在调整大小后下降到徽标下方：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>

来源

2013-07-17 beetheezy

你能告诉我们你的代码菜单/标志吗？ – dezman

请在此处添加有意义的代码和问题描述。请不要将链接到需要修复的网站 - 否则，一旦问题得到解决，此问题将会丢失未来访问者的任何价值。发布 [简短，独立，正确的示例（SSCCE）]（http://www.sscce.org/），这表明您的问题将帮助您获得更好的答案。有关更多信息，请参阅 [我的网站上的某些内容不起作用。我可以只粘贴一个链接到它吗？]（http://meta.stackexchange.com/questions/125997/）谢谢！ – j08691

您不能在绝对定位的元素周围浮动/流动。 – isherwood

只需添加：

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

到layout.css中，它会照顾标识问题。

另外：

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

意志摆脱导航和“欢迎”

来源

2013-07-17 17:37:33 Labanino

完美。谢谢。 – beetheezy

这之间的差距是一个办法，就是在您的标志和页面宽度少了几分依赖：

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

请注意，您必须颠倒3个右浮动菜单项的顺序，因为它们是从右到左堆叠的。

来源

2013-07-17 17:46:03 isherwood

回答

相关问题