带有中心徽标的导航栏 [英] Navigation Bar with centered Logo

问题描述

我已经搜索过类似的问题，但没有找到解决方案，我正在寻找具体。我试图让我的导航栏围绕我的中心的标志，在徽标的两侧有偶数个链接。但是，如果窗口较小，链接应显示在徽标下面。基本上我想实现此页面的效果： http://www.colbowdesign.com/index.html

I have searched through similar questions but found no solutions to what I am looking for specifically. I am trying to get my navigation bar around my centered logo, with an even number of links on either side of the logo. However, if the window is smaller, the links should appear below the logo. Basically I am trying to achieve the effect of this page: http://www.colbowdesign.com/index.html

以下是我的代码：

HTML

    <header>
            <img src="assets/CK-Square.png" class="logo">
            <ul>
                <li><a href="#">Work</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
                <li><a href="#">Social</a></li>
            </ul>
    </header>

CSS

.logo {
      margin-left: auto;
      margin-right: auto;
      display: block;
}

header li{
      display: inline;
}

header {
      width: 100%
      height: auto;
      border-style: solid;
      margin: 0;
      padding: 0;
}

我感谢任何和所有的反馈/帮助！

I appreciate any and all feedback/help!

推荐答案

解决方案基于使用媒体查询将布局从小屏幕更改为桌面。

The solution is based on using media queries to change the layout from small screen up to desktop .

<header>
    <h2 id="logo">Logo</h2>
    <ul class="nav">
        <li><a href="#">Work</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">Social</a></li>
    </ul>
</header>


 header {
  width: 90%; 
  margin: 0 auto;
}

#logo {
    text-align: center;
}

.nav {
    text-align: center;
}

.nav li {
  display: inline;
  margin-right: 1em;
}

/* use media query to change the layout */
@media  (min-width: 768px) {
    body {
        background-color: #f2f2f2;
    }

    .nav {
        margin-top: -42px;
    }

    .nav li:nth-child(1), .nav li:nth-child(2) {
        float: left;
    }

    .nav li:nth-child(3), .nav li:nth-child(4) {
        float: right;
    }
}

查看它 http://jsbin.com/arexuq/2/

这篇关于带有中心徽标的导航栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！