I have recently updated the mobile navigation layout in bootstrap. However, I encountered an issue where the sliding pane was behaving unexpectedly - it was mixing with the default bootstrap sliding from top to bottom effect. How can I remove this default behavior and code?
Here is the code snippet:
http://jsfiddle.net/RxguB/183/
HTML
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header pull-left">
<a class="navbar-brand" href="index.php">ddd</a>
</div>
<div class="navbar-header pull-right">
<button type="button" class="navbar-toggle"
data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<p class="navbar-text">
<b> '.$username.' </b>
<a href="logout.php" class="navbar-link">Logout</a>
</p>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="index.php">Home</a></li>
<li><a href="about.php">About</a></li>
<li><a href="contact.php">Contact</a></li>
</ul>
</div>
</div>
</div>
CSS
.navbar-collapse{
position:fixed;
overflow:hidden;
-webkit-transform: translate(-100%, 0);
-webkit-transition: all 1s;
z-index: 999999;
width:80%;
background-color: green;
}
JS
$(document).ready(function(){
var menu ="close";
$('.navbar-toggle').click(function() {
if(menu == "close") {
$('.navbar-collapse').css('-webkit-transform', 'translate(0, 0)');
menu= "open";
}
else{
$('.navbar-collapse').css('-webkit-transform', 'translate(-100%, 0)');
menu="close";
}
});
});