如何创建自定义可折叠Navbar

Question

我尝试为自定义NavBar创建基本功能，该屏幕在小屏幕尺寸时具有可折叠导航选项。

背景：我决定不使用默认的bootstrap导航类，因为我听说你只能做你能做的事。（我希望我的导航栏有两行，并且能够使用我的内容自举网格系统）

以下是我到目前为止所尝试的内容，但它有一些问题，我相信会有更好的方法来实现这一目标。也许是javascript或者其他什么？

<div class="container-fluid" id="nav">
  <div class="row">
    <div id="collapse-nav">
      <div class="col-lg-2 col-md-3 col-sm-12 tx">
        <a href="#">LINK 1</a>
      </div>

      <div class="col-lg-2 col-md-3 col-sm-12 tx">
        <a href="#">LINK 1</a>
      </div>

      <div class="col-lg-2 col-md-3 col-sm-12 tx">
        <a href="#">LINK 1</a>
      </div>

      <div class="col-lg-2 col-md-3 col-sm-12 tx">
        <a href="#">LINK 1</a>
      </div>
    </div>
  </div>
</div>

<p id="collapse-btn">
  <a class="btn" data-toggle="collapse" data- target="#collapse-nav">
    <span class="glyphicon glyphicon-menu-hamburger"></span>
  </a>
</p>

CSS

#collapse-nav {
  display: none;
}

@media (max-width: 992px) {
  #collapse-nav {
    display: block;
  }
}