Bootstrap hamburger menu mobile - on click will appear and then disappear - html

Question

I've taken a bootstrap theme and the hamburger menu on mobile wasn't working. When the menu is toggled open on mobile, it will open and then quickly close but the menu links are still able to be pressed as if they were there, like they're invisible.
I've checked that the original files had a broken menu and it doesn't. I've tried googling to find out what the problem is but I'm struggling to find an answer.
The only thing I have is that when i use .menu {position: absolute;} then the menu on mobile opens and then quickly closes. When I changed it to .menu {position: relative;} then the menu stays open, but is all right aligned and doesn't look good.
<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">
<img src="images\robark-Logo.png" alt="Robark Solutions Logo" title="Robark Solutions" width="260" height="90"/>
</div>
</div>
</div>
<div class="navbar-collapse collapse">
<div class="menu">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation">Home</li>
<li role="presentation">About Us</li>
<li role="presentation">Services</li>
<li role="presentation">Portfolio</li>
<li role="presentation">Contact</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;
}