Bootstrap：导航栏上方的徽标 - 在折叠模式下，主要内容不会向下移动

Question

我正在尝试找到一种在导航栏上方添加徽标的方法。对于我的网站的桌面版本，这不是问题，但在移动设备上打开页面会产生一些问题。折叠导航栏后，切换不会将主要内容向下移动。因此，未折叠的导航栏会覆盖内容的某些部分。

这是我的代码：

header[role="banner"] #logo-main {


}
#logo-main {


  margin: auto;
  position: absolute;
  top: 8%;
  left: 37.5%;
  width: 340px;
  height:130px;

}

.headercontainer {
  background-image: url('https://images.pexels.com/photos/418147/pexels-photo-418147.jpeg');
  background-repeat: no-repeat;
  background-size: contain;
  width: 100%;
  height: 0;
  padding-top: 47.2%; /* (img-height / img-width * container-width) */
                /*  (827 / 1752 * 100) */
}

#navbar-primary.navbar-default {
  position: absolute;
  top: 20%;
  left: 15%;
  padding-top: 100px;
  background: transparent;
  border: none;
}
#navbar-primary.navbar-default .navbar-nav {
  width: 100%;
  text-align: center;
}
#navbar-primary.navbar-default .navbar-nav > li {
  display: inline-block;
  float: none;
  text-transform: uppercase;

  font-family: 'Open Sans';
  font-size: 16pt;
  font-weight: 400;
  letter-spacing: 1.5px;
}

#navbar-primary.navbar-default .navbar-nav > li > a {
  color:black;
  padding-left: 85px;
  padding-right: 85px;
}

#navbar-primary.navbar-default .navbar-nav > li > a:hover {
  color:black;
}



.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover {
  background-color: transparent;

}

.navbar-default .navbar-nav > .active > a > span {
  padding-bottom: 5px;
  border-bottom: 2px solid black;
}

.navbar-nav a:hover span {
  padding-bottom: 5px;
  border-bottom: 2px solid black;
  /*background-image: url("../images/blackdot.png");
  background-repeat: repeat-x;
  background-position: center 100%;*/
}

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="headercontainer">
  <header role="banner">
  <img id="logo-main" src="https://cdn3.iconfinder.com/data/icons/black-white-social-media/32/logo_social_media_phone-2-512.png" alt="Spurwandel">
<nav id="navbar-primary" class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-primary-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <div class="collapse navbar-collapse" id="navbar-primary-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="index.html"><span class="noleftpadding">Home</span></a></li>
        <li><a href="about.html"><span class="noleftpadding">About</span></a></li>
        <li><a href="coachings.html"><span class="noleftpadding">Coachings</span></a></li>
        <li class=""><a href="kontakt.html"><span class="noleftpadding">Kontakt</span></a></li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
</header><!-- header role="banner" -->

</div>

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <span>Main Content</span>
    </div>
  </div>
</div>

您可以在此处找到示例：https://www.bootply.com/jQG65nqmRE

提前致谢。

此致 拉斯