Bootstrap мобильное меню гамбургера - при нажатии появится, а затем исчезнет

Question

Я выбрал тему bootstrap, а меню гамбургеров на мобильном телефоне не работало. Когда меню открывается на мобильном телефоне, оно открывается и затем быстро закрывается, но ссылки меню по-прежнему можно нажимать, как если бы они были там, как будто они невидимы.

Я проверил, что у оригинальных файлов было сломанное меню, и это не так. Я попытался поискать в Google, чтобы выяснить, в чем проблема, но я изо всех сил пытаюсь найти ответ.

Единственное, что у меня есть, это то, что когда я использую .menu {position: absolute;}, открывается меню на мобильном телефоне, а затем быстро закрывается. Когда я изменил его на .menu {position: relative;}, меню остается открытым, но выровнено и выглядит не очень хорошо.

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="navigation">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse.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 class="navbar-brand">
          <div id="logo" class="pull-left">
            <a href="index.html"><img src="images\robark-Logo.png" alt="Robark Solutions Logo" title="Robark Solutions" width="260" height="90"/></a>
          </div>
        </div>
      </div>

      <div class="navbar-collapse collapse">
        <div class="menu">
          <ul class="nav nav-tabs" role="tablist">
            <li role="presentation"><a href="index.html" class="active">Home</a></li>
            <li role="presentation"><a href="about.html">About Us</a></li>
            <li role="presentation"><a href="services.html">Services</a></li>
            <li role="presentation"><a href="portfolio.html">Portfolio</a></li>
            <li role="presentation"><a href="contact.html">Contact</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</nav>

CSS:

.navigation  {
    background-color:#fff;
    padding:0;
}

.navbar-brand {
  min-height: 100px;
}

.navbar-brand h1 {
    margin-top:9px;
    padding-top:5px;
    float: left;
    font-size: 25px;
    color:#333;
    text-transform:uppercase;
    font-weight:900;
}
.navbar-brand h1 span {
    color: #F0A830;
}

.menu {
  position: absolute;
  overflow: hidden;
    font-size:12px;
    float:right;
    text-transform:uppercase;
    font-weight:700;
}

.menu:active ul {
  display: block;
}

.menu ul.nav-tabs li {
    color:#000;
}

.nav-tabs {
    border-bottom: 0;
}
.nav-tabs > li {
    float: left;
    margin-bottom: 0;
}
.nav-tabs > li > a {
    border-radius:0;
    color:#333;
    padding:30px;
}

.nav-tabs > li > a:hover {
    color: #F0A830;
    border-color: #fff #fff #fff;
    border-radius:0;
    background-color:#fff;
    transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
}
.nav-tabs > li > a.active {
    color: #F0A830;
    border-radius:0;
    transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
}

@media (max-width: 767px) {
    .navbar-brand {
    min-height: 85px;
        padding-top: 6px;
    }
    .navbar-brand h1 {
        margin-top: 0;
    }

    .nav-tabs > li {
        float: none;
        display: block;
    }

    .menu {
    position: absolute;
        left: 0;
        right: 0;
        background: #fff;
  }

  .menu .collapse {
    display: none;
    visibility: hidden;
}

  .menu-default{
    z-index: 1030;
  }

  .menu:active ul {
    display: block;
  }

    .nav-tabs > li > a {
        padding:15px 15px;
        border-bottom: 1px solid #f3f3f3;
    }

    .nav-tabs > li > a:hover {
        border-color: #f3f3f3;
    }
}

Bootstrap CSS:

 @media (min-width: 768px) {
.navbar-header {
 float: left;
}
}
.navbar-collapse {
padding-right: 15px;
padding-left: 15px;
overflow-x: visible;
border-top: 1px solid transparent;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
-webkit-overflow-scrolling: touch;
}
.navbar-collapse.in {
overflow-y: auto;
}
@media (min-width: 768px) {
.navbar-collapse {
 width: auto;
 border-top: 0;
 -webkit-box-shadow: none;
 box-shadow: none;
}

.navbar-collapse.collapse {
 display: block!important;
 height: auto!important;
 padding-bottom: 0;
 overflow: visible!important;
 visibility: visible!important;
}

.navbar-fixed-top .navbar-collapse,
.navbar-static-top .navbar-collapse,
.navbar-fixed-bottom .navbar-collapse {
 padding-right: 0;
 padding-left: 0;
}
}
.navbar-fixed-top,
.navbar-fixed-bottom {
position: fixed;
right: 0;
left: 0;
z-index: 1030;
}
.navbar-fixed-top .navbar-collapse,
.navbar-fixed-bottom .navbar-collapse {
max-height: 340px;
}