Bootstrap Navigation Toggle

Question

У меня есть веб-страница со стандартным заголовком начальной загрузки (с логотипом и выпадающим списком) и боковой панелью для навигации. Я пытаюсь сделать сбоку боковой панели, когда размер экрана мал. Для этого я сделал кнопку переключения, которая просто разрушает меню. Но проблема в том, что кажется, что даже когда меню с коллапсом закрыто, некоторое содержимое все еще появляется поверх всего. Вот скриншот, чтобы показать, что я имею в виду.

Фиолетовый бокс показывает, что даже когда меню закрыто, его содержимое каким-то образом появляется поверх других элементов. Есть ли исправление для этого? Вот код:

<nav class="navbar navbar-inverse navbar-fixed-top"> 
    <div class="container-fluid"> 
     <div class="navbar-header"> 
      <a href="#side" class="btn btn-default btn-primary pull-left navbar-toggle" data-toggle="collapse"><span class="caret"></span></a> 
      <a class="navbar-brand pull-right" href="#">Company Logo</a> 
     </div> 
     <ul id="side" class="nav navbar-nav collapse visible-xs"> 
      <li><a href="#">Home</a></li> 
      <li><a href="stuff.html">Stuff</a></li> 
      <li><a href="list.html">List Example</a></li> 
      <li><a href="#">Contacts</a></li> 
      <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">User <span class="caret"> </span> </a> 
       <ul class="dropdown-menu"> 
        <li><a href="#">Profile</a></li> 
        <li><a href="#">Logout</a></li> 
       </ul> 
      </li> 
     </ul> 
    </div> 
    </nav> 

Answer 1

Попробуйте добавить это к NavBar-заголовка

<div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       </button> 
      </div> 

и удалить видимые-хз тоже оттуда.