Html 引导导航栏切换无法正常工作，在移动视图中，徽标隐藏在下方

我遇到了boostrap导航条切换的问题，已经为此挣扎了一段时间了。首先，当减少窗口大小时，我的徽标会隐藏在下面，如。看起来容器太高了，但是如果我减少它，其他内容就会受到影响。接下来，当我减小窗口大小时，导航链接也会发生同样的情况，它们会像推传送带照片一样位于徽标下方。在这一点上，我希望导航链接隐藏和切换按钮显示出来。 最后，移动视图的导航显示为透明背景和不必要的顶部填充，如第一个屏幕截图所示

相关HTML：

    <div class="navbar navbar-default" data-spy = "affix" data-offset-top = "200" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
      <a class="navbar-brand" href="index-en"><img class = "logo" src = "logo.png" alt = ""></a>
        </div>

    <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav navbar-right">
            <li class="active"><a class = "active" href="#">Home</a></li>       
            <li><a href="about">About us</a></li>
            <li><a href="employees">Employees</a></li>       
            <li><a href="where">Where we are</a></li>
        </ul>
    </div>


    </div>
  </div>

我希望能就如何解决这个问题提出一些建议。

---

刚刚添加了具有固定高度的新div，但它不起作用，徽标保留在原来的位置，但切换按钮没有显示。

以下是窗口大小减小时自动设置隐藏导航栏的示例。我想这可能会有帮助

无标题文件
$（文档）.ready（函数（）{
$（“span.nav btn”）。单击（函数（）{
$（“ul.nav”）.slideToggle（）；
}); 
$（窗口）。调整大小（函数（）{
如果（$（窗口）.width（）>600）
{
$（'ul.nav'）.removeAttr（“样式”）；
}
如果（$（窗口）.width（）li{
显示：内联块；
}
.nav>li>a{
文字装饰：无；
字号：18px；
}
@介质（最大宽度：600px）{
.导航{
文本对齐：左对齐；
}
李国荣先生{
显示：块；
}
.nav btn{
显示：块；
背景：#FF6600；
字体大小：20px；
光标：指针；
}
.nav btn：之前{
内容：“菜单”；
}
}

.container{
    min-height: 100%!important;
    margin: 0 auto!important;
    padding: 0 0 0px!important;
}

.navbar-default .navbar-nav > li > a {
    color: #4E4F51!important;
    text-transform: uppercase!important;
    font-family: 'Raleway', sans-serif!important;
    font-size: 16px;
    text-decoration: none;
    margin: 0px 10px;
    padding: 10px 10px;
    position: relative;
    z-index: 0;
    cursor: pointer;
}

.navbar-default .navbar-nav > .active  > a,
.navbar-default .navbar-nav > .active  > a:hover,
.navbar-default .navbar-nav > .active  > a:focus {
    color: #3BB34A!important;
    background-color: transparent!important;
}
.navbar-header {
    overflow:hidden!important;
}
.logo{
    max-height:100%;
}
.navbar-brand {
    padding: 0px!important;
    height: 140px!important;
}

.navbar-brand>img {
    padding: 15px!important;
    width: auto!important;
}

.navbar-toggle {
    padding: px!important;
    margin: 25px 15px 25px 0!important;
}
.navbar {
    margin-bottom: 0!important;
}

.navbar-default {
    z-index:9999!important;
}
.navbar-default .navbar-nav {
    padding-top:50px;
}
.affix{
    top: 0;
    width: 100%;
    -webkit-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    opacity: 0.9;
    max-height:140px;

}
.affix-top {
  -webkit-transition:padding 1.5s ease-in-out;
  -moz-transition:padding 1.5s ease-in-out;  
  -o-transition:padding 1.5s ease-in-out;         
  transition:padding 1.5s ease-in-out;
  max-height:140px;
}