Currently, I am utilizing the Dashgum bootstrap template obtained from Gridgum for a specific assignment. The task involves displaying the side navbar for logged-in users persistently, even after they have closed the site, and hiding the side navbar completely for users who are logged out.
Although the side navbar is initially visible by default, I intend to set its default state to "hidden". How can I achieve the initial hiding of the side navbar?
Being relatively new to bootstrap, I am still acquainting myself with it. I am reaching out on SO as a final resort for assistance.
HTML Code for the Side Navbar
<aside>
<div id="sidebar" class="nav-collapse ">
<!-- sidebar menu start-->
<ul class="sidebar-menu" id="nav-accordion">
<p class="centered"><a href="profile.html"><img src="assets/img/ui-sam.jpg" class="img-circle" width="60"></a></p>
<h5 class="centered">Marcel Newman</h5>
<li class="mt">
<a href="index.html">
<i class="fa fa-dashboard"></i>
<span>Dashboard</span>
</a>
</li>
</ul>
</div>
</aside>
JS Code for Sidebar Collapse
// sidebar toggle
$(function() {
function responsiveView() {
var wSize = $(window).width();
if (wSize <= 768) {
$('#container').addClass('sidebar-close');
$('#sidebar > ul').hide();
}
if (wSize > 768) {
$('#container').removeClass('sidebar-close');
$('#sidebar > ul').show();
}
}
$(window).on('load', responsiveView);
$(window).on('resize', responsiveView);
});
$('.fa-bars').click(function () {
if ($('#sidebar > ul').is(":visible") === true) {
$('#main-content').css({
'margin-left': '0px'
});
$('#sidebar').css({
'margin-left': '-210px'
});
$('#sidebar > ul').hide();
$("#container").addClass("sidebar-closed");
} else {
$('#main-content').css({
'margin-left': '210px'
});
$('#sidebar > ul').show();
$('#sidebar').css({
'margin-left': '0'
});
$("#container").removeClass("sidebar-closed");
}
});
Although I attempted CSS modifications and executed the jQuery command
$("#container").addClass("sidebar-closed");
I embedded the HTML page with the mentioned JavaScript tag following the CSS, yet the navbar continues to display by default.
EDIT 1 - I have revised the problem's premise to offer additional context.
- I appreciate everyone's responses to my query and experimented with all the solutions provided. However, the issue I encountered was the table and the side navbar overlapping (for logged-in users), and upon logout, the side navbar hides, but the main content does not shift left.
EDIT 2 - Due to the overlapping of the table and the side navbar, I have decided to conceal the navbar by default, but my attempts thus far have been unfruitful.