带引导程序的垂直折叠导航栏

Question

我正在尝试制作一个带有引导程序的响应式导航栏，它会垂直显示菜单并在您单击按钮时隐藏它。当我点击小屏幕上的按钮时当前代码显示和水平导航栏，当我想要关闭导航栏时按钮不起作用。我不明白问题出在哪里:(

CSS是引导程序文件，我所做的唯一修改是id="barremenu"：

#barremenu{
display:block;

}

<nav class="navbar navbar-inverse navbar-static-top">
    <div class="container" id="barremenu">
      <div class="navbar-header">

        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
          <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="img-responsive pull-left" href="welcome.html"><img src="css/pictures/name.png" alt="Welcome" height="50px" style="margin-top:12px">
        </a>
      </div>
      <div id="navbar" class="collapse navbar-collapse">
    <ul class="nav navbar-nav">
      <li><a href="#" style="color:red">Section 1</a></li>
      <li><a href="#">Section 2</a></li>
      <li><a href="#">Section 3</a></li>
      <li><a href="#">Section 4</a></li>
      <li><a href="#">Section 5</a></li>
      <li><a href="#">Section 6</a></li>
      <li><a href="#">Section 7</a></li>
      <li><a href="#">Section 8</a></li>
    </ul>
      </div>
    </div>
</nav>