I have successfully modified the bootstrap navbar to toggle from right to left instead of top to bottom using the following code:
For HTML-
<nav class="navbar navbar-inverse" role="navigation" style="height: 55px; padding-top: 2px; background-color: #000;">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#" id="a_logo_s_s">
<img src="images/Png - Only Logo - Variant 2.png" class="img-responsive" id="logo_s_s" >
</a>
<a class="navbar-brand" href="#" id="a_logo_l_s">
<img src="images/Png - Only Text - White.png" class="img-responsive" id="logo_l_s" >
</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar" style="height: 346px !important">
<ul class="nav navbar-nav navbar-left">
<li class="active" id="l_hiw"><a href="#s3" id="hiw" class="navLink">HOW IT WORKS</a></li>
<li id="l_cp"><a href="#s4_1" id="cp" class="navLink">COACHES</a></li>
<li id="l_cp"><a href="#s5" id="au" class="navLink">ABOUT</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li id="l_el"><a href="#" id="el">ENROLL</a></li>
<li id="l_ma"><a href="#" id="ma" class="navLink">MANAGE ACCOUNT</a></li>
<li id="l_aq"><a href="#cftr" id="aq" class="navLink">CONTACT</a></li>
</ul>
</div>
</div>
</nav>
CSS-
.is_open{
width: 240px;
}
#myNavbar{
position: fixed;
padding-left: 10px;
padding-right: 0px;
right: 0px;
height: 100%;
}
JS-
$('[data-toggle="collapse"]').on('click',function(e) {
e.preventDefault();
setTimeout(function(){
$("#myNavbar").css({
"height":"100%",
});
},10);
$("#myNavbar").toggleClass('is_open',1000);
});
Although the functionality works initially, after multiple clicks it starts to malfunction as described below:
- On the first click, nothing happens.
- On the second click, the navbar briefly appears and then disappears again, indicating that both clicks are registering simultaneously.
Edit 1: I attempted to address this issue by utilizing various CSS properties such as "right" and "transform", along with jQuery's "animate" function. However, on alternate clicks, the values of 0 and -240px result in a slight jerk during the showing and hiding process. This behavior is specific to Chrome, whereas other browsers display the expected functionality. This erratic behavior persists across all browsers during the first and second clicks.
Edit 2: To mitigate the abrupt slide effect caused by the sudden change in navbar height from 1px to 100%, I introduced the following code snippet:
setTimeout(function(){
$("#myNavbar").css({
"height":"100%",
});
},10);
In Chrome specifically, despite setting "height: 100%" in the inline style attribute of the navbar element, the height reverts to 1px after the initial click. To maintain the desired height, the use of "setTimeout" was necessary to refresh the height value after each click event.
This inconsistent behavior could be responsible for the minor jerk observed during the showing and hiding of the navbar, as the height transitions from 1px -> 100% -> 346px. It's worth noting that this issue seems isolated to Chrome.