Context:
I'm in the process of developing a collapsible sidebar navigation menu inspired by the bootstrap admin panel example found at:
Issue:
Upon collapsing the admin bar, a small bar of icons appears. To accommodate this, I added margin-left: 50px to the main content section. However, this adjustment causes the main content to be shifted off-screen to the right.
Here's a screenshot illustrating the problem:
https://i.sstatic.net/EYUMX.png
Current Progress:
HTML Markup:
<!-- top navigation -->
<nav class="navbar navbar-toggleable-md navbar-inverse fixed-top bg-inverse">
(...)
</nav>
<!-- end top navigation -->
<div class="container-fluid">
<div class="row">
<!-- sidebar navigation -->
<nav id="sidebar" class="col-sm-3 col-md-2 hidden-xs-down bg-faded sidebar">
(...)
</nav>
<!-- end sidebar navigation -->
<!-- main content -->
<main id="mainContent" class="col-sm-9 offset-sm-3 col-md-10 offset-md-2 pt-3">
(...)
</main>
<!-- end main content -->
</div>
</div>
CSS:
/* Bootstrap styles */
body {
padding-top: 50px;
}
.sidebar {
(...)
}
/* Sidebar button */
(…)
/* My jQuery toggle code */
(…)