带有居中徽标的响应式 HTML5 导航栏“弹出”答案

【问题标题】：Responsive HTML5 navbar with centered logo "popping" out带有居中徽标的响应式 HTML5 导航栏“弹出”
【发布时间】：2016-12-08 01:37:06
【问题描述】：

我正在尝试为桌面版本构建一个响应式导航栏，如下图所示，在移动版本中，我希望它转换为下拉汉堡菜单。我还希望徽标在其外部“弹出”并覆盖导航栏下的一些内容。

navbar with logo "popping" out

我是初学者，所以我正在考虑修改引导导航栏以满足我的需要，但我遇到了以下困难：

我不知道如何使内容居中并保持响应（我不介意徽标是否在移动版的汉堡菜单中可见）。
我不知道如何使徽标“弹出”到导航栏外并覆盖其下的一些内容
我还没有找到以红色显示和着色活动选项卡的部分，但我也需要一些帮助

如果有人有时间阅读这篇文章并向我提供帮助或一些建议，我将不胜感激。

到目前为止，您可以在下面看到我的代码，但我不确定它有多好。祝大家有个美好的一天:)

#menu-wrapper {
  background: rgba(0,0,0,0.4) !important;
}


#burger-menu {
  color: #fbf9ff;
}

#nav-container {
text-align: center;
margin:0 auto;
display: inline-block;
position:fixed;
width:100%;
height:15%;
background:#c73a30;
}
.logo{
  top:-65px !important;
  height:150px !important;
  line-height:150px;
  overflow:hidden;
}

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>navbar</title>
    <link rel="stylesheet" href="css/style.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.4/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>


<section id="nav-container">
  <nav id="menu-wrapper" class="navbar navbar-fixed-top navbar-dark bg-inverse">
      <div class="navbar-header">
          <button id="burger-menu" class="navbar-toggler hidden-sm-up pull-xs-right" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar" aria-expanded="false">
              &#9776;
          </button>
      </div>
      <div class="collapse navbar-toggleable-xs pull-sm-right" id="navbar">
          <ul class="nav navbar-nav">
              <li class="nav-item">
                  <a class="nav-link" href="#about-me">COMEDIANS</a>
              </li>
              <li class="nav-item">
                  <a class="nav-link" href="#web-development">EVENTS</a>
              </li>
              <div class="logo">
                <img src="http://www.battleoftastings.com/wp-content/uploads/2013/03/seafood-placeholder150x150px.png"/>
              </div>
              <li class="nav-item">
                  <a class="nav-link" href="#gallery">GET IN TOUCH</a>
              </li>
              <li class="nav-item">
                  <a class="nav-link" href="#gallery">GALLERY</a>
              </li>
          </ul>
      </div>
  </nav>
</section>



<script src="http://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.4/js/bootstrap.min.js"></script>

</body>

【问题讨论】：

标签： css html twitter-bootstrap

【解决方案1】：

我不知道任何引导程序，所以我将建议纯 CSS3 解决方案。首先，您需要像这样创建一个媒体查询：

@media (max-width: 600px) {

}

这将告诉 CSS3，如果窗口宽度小于 600 像素，则运行一些代码。 @media 代码将覆盖任何现有代码。如需更深入的解释，请查看任何 @media 教程。有很多教程解释了如何正确使用@media 查询。

问题 #1：

@media 查询中一个简单的text-align:center; 就足够了。

问题 #2：在这里，您需要图像的副本。您可以将该副本放置在任何您想要的位置。为副本提供一个 ID，因为您需要隐藏它。然后在id中输入display:none;。如果你做对了，你应该得到这个结果：

#logocopy {
    display:none;
}

然后在您的@media 查询中将图像的副本设置为display:block;，同时将导航栏中的图像设置为display:none;。如果你做对了，你应该得到这个结果：

@media (max-width: 600px) {
   .logo {
       display:none;
   }
   #logoCopy {
       display: block;
   }
}

如果您想使图像居中，请执行以下操作：#logoCopy {margin: 0 auto;}。当然，在媒体查询中这样做。如果一切都正确完成，您的图像应该能够跳出导航栏。现在如果你想让你的图像覆盖一些文本，你将不得不编辑图像的换行点。

问题 #3：这个也很简单，你要做的就是给第一个li（假设你在第一页）一个“active”的id（id的名字可以是任何东西）然后编码：

#active {
    background-color: red;
}

如果你把你的 id 放在正确的地方，它应该是这样的：

<div class="collapse navbar-toggleable-xs pull-sm-right" id="navbar">
          <ul class="nav navbar-nav">
              <li class="nav-item" id="active">
                  <a class="nav-link" href="#about-me">COMEDIANS</a>
              </li>
              <li class="nav-item">
                  <a class="nav-link" href="#web-development">EVENTS</a>
              </li>
              <div class="logo">
                <img src="http://www.battleoftastings.com/wp-content/uploads/2013/03/seafood-placeholder150x150px.png"/>
              </div>
              <li class="nav-item">
                  <a class="nav-link" href="#gallery">GET IN TOUCH</a>
              </li>
              <li class="nav-item">
                  <a class="nav-link" href="#gallery">GALLERY</a>
              </li>
          </ul>
      </div>

希望这会有所帮助！

【讨论】：