Bootstrap 3.2如何解决logo滚动时覆盖内容且导航栏不固定的问题

我并非专业设计师，因此在此求助。我在站点主导航div上方的div中放置了一个logo，桌面端显示正常，但当页面缩放至移动端尺寸后，向下滚动页面时logo会覆盖站点内所有内容。我尝试为第一个div class="navbar-inner"元素更换不同类名，但都无法让logo保持在正确位置。

注意：我不希望logo固定在屏幕上，滚动页面时，两个导航栏及其中内容、logo都可以随页面滚动消失。

相关代码 #

CSS代码 #

.navbar-fixed-top2 {
  padding-left: 0;
  padding-right: 0;
  max-height: 340px;
  margin-top: 60px
}

.navbar {
  border-bottom: unset !important;
  margin-bottom: unset !important;
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important
}

HTML代码 #

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="navbar navbar-fixed-top">
  <div class="navbar-inner" role="banner">
    <div class="container">
      <a href="" target="_blank" title="Redirect to main website" class="navbar-brand">
        <img src="https://via.placeholder.com/80" alt="logo" />
      </a>
    </div>
  </div>
</div>
<div class="navbar navbar-inverse navbar-fixed-top2" role="navigation">
  <div class="navbar-inner">
    <div class="container">
      <ul class="nav navbar-nav">
        <li><a href="link" class="navbar-brand" title="Redirect to website">Link</a></li>
        <li><a href="/" title="Redirect to home">Home</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li>
          <span>Hello!</span>
        </li>
      </ul>
    </div>
  </div>
</div>

已验证的解决方案 #

将两个navbar div的类修改为navbar-static-top，同时移除body的padding-top配置即可。修改后logo和两个导航栏都会随页面正常滚动，不会固定在视口顶部覆盖页面内容。

内容的提问来源于stack exchange，提问作者Jamie