Hello everyone, I'm currently working on creating a left-sided menu using bootstrap. I have implemented jQuery to toggle the menu show/hide functionality for a button click. It works perfectly in Desktop view, but in the Mobile view, the button is not positioned next to the menu as shown in the image below.
Desktop View
Mobile View
Below is the code snippet:
<body>
<script src="~/Scripts/jquery-1.9.1.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script>
$(document).ready(function () {
$('#nav1').hide();
$('#btn1').click(function () {
$('#nav1').toggle("slow");
});
});
</script>
<div id="custom-bootstrap-menu" class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header"><a class="navbar-brand" href="#"><b style="font-size: 1.50em">Brand Name</b><br /><span style="font-size: .50em">Brand description</span></a>
<button type="button" class="navbar-toggle"><span class="glyphicon glyphicon-pencil"></span> Register</button>
<button type="button" class="navbar-toggle"><span class="glyphicon glyphicon-off"></span> LogIn</button>
</div>
<div class="collapse navbar-collapse navbar-menubuilder">
<ul class="nav navbar-nav navbar-right">
<button id="btn2" class="btn btn-default"><span class="glyphicon glyphicon-off"></span> LogIn</button>
<button id="btn3" class="btn btn-default"><span class="glyphicon glyphicon-pencil"></span> Register</button>
</ul>
</div>
</div>
</div><br /><br /><br /><br />
<button id="btn1" class="btn btn-default glyphicon glyphicon-home"></button>
<ul id="nav1" class="nav nav-pills nav-stacked col-sm-3">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">About</a></li>
<li><a href="#">About</a></li>
<li><a href="#">About</a></li>
</ul>
</body>
Could you please identify any issues in my code and suggest how I can achieve the same mobile view layout as the Desktop view? Your assistance would be greatly appreciated. Thank you.