如何在响应式导航栏上放置徽标图像

Question

我正在尝试将徽标图片添加到导航栏。我成功地在桌面版本中添加了图片，但它没有显示在我的移动版本中（＆gt; 787像素）。这是我正在使用的代码。

/* Navigation Menu */

#header .navbar {
  position: fixed;
  top: 0px;
  right: 0px;
  left: 0px;
  min-height: 0px;
  font-family: Montserrat, Arial, serif;
  color: #FFF;
  background-color: #333;
  padding: 15px 0px;
  margin: 0px;
  border: 0px;
  z-index: 100;
  border-radius: 0px;
  -webkit-transition: all .2s ease;
  transition: all .2s ease;
}
#header .navbar > .container .navbar-brand {
  margin: 0px;
}
#header .navbar-brand img {
  height: 45.5px;
}
#header .nav {
  overflow: hidden;
  float: right;
  height: 40px;
  /* Navigation Mobile */
  #navigation_mobile {
    display: none;
  }
  #navigation_mobile .nav-menu-links {
    display: none;
    background-color: #2a2a2a;
  }
  #navigation_mobile ul li {
    list-style-type: none;
    padding: 11px 0px;
  }
  #navigation_mobile ul li a {
    display: block;
    color: #a9a9a9;
  }
  #navigation_mobile ul li a:hover {
    color: #FFF;
  }
  #navigation_mobile .nav-menu-button {
    background-color: #202020;
    padding: 15px 0px 14px;
  }
  #navigation_mobile .nav-menu-button button.nav-menu-toggle {
    color: #a9a9a9 !important;
    font-size: 20px;
    line-height: 2;
    padding: 0px;
    background: none;
    border: 0px;
    border-radius: 0px;
    -webkit-transition: color .2s ease;
    transition: color .2s ease;
  }
  #navigation_mobile .nav-menu-button button.nav-menu-toggle:hover {
    color: #FFF !important;
  }
}
@media (max-width: 767px) {
  #header .navbar {
    display: none;
  }
  #navigation_mobile {
    display: block;
  }
}

<!-- #navigation -->
<nav id="navigation" class="navbar scrollspy">

  <!-- .container -->
  <div class="container">
    <div class="navbar-brand">
      <a href="index.html">
        <img src="images/logo.png" alt="Logo" id="logo-image" />
      </a>
    </div>



    <ul class="nav navbar-nav">
      <li><a href="#about" class="smooth-scroll">About</a>
      </li>
      <li><a href="#howitworks" class="smooth-scroll">Features</a>
      </li>
      <li class="menu-btn"><a href="page_contact.html">Contact</a>
      </li>
    </ul>
  </div>
  <!-- .container end -->

</nav>
<!-- #navigation end -->

Answer 1

这一行是罪魁祸首 -

@media (max-width: 767px) {...
#header .navbar{ display:none;}
 ...}

您的图像位于.navbar中，并将其隐藏在较小的视口中。

    <nav id="navigation" class="navbar scrollspy">
...
                <a href="index.html"><img src="images/logo.png" alt="Logo" id="logo-image" /></a>
...

您需要将其移出该容器或更改您的css选择器。