My website has a top fixed navbar and a left navbar. The issue arises when scrolling, as the right scrollbar overlaps with the top navbar. I want the left navbar to start below the top one.
To see a live example of the problem, check out this fiddle: https://jsfiddle.net/jsmnsLm7/. Make sure to resize your window to view all the features of my navbar setup.
Below is the code from the fiddle:
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
(navbar code here)
</div>
</nav>
<div class="container">
<div class="row row-offcanvas row-offcanvas-left">
(sidebar code here)
<div class="col-sm-9 col-md-10 main" style="margin-left: 180px;">
</div>
</div>
</div>
I've seen similar discussions on StackOverflow recommending adding position: fixed to the container's CSS. However, doing so fixes the left navbar to the very left of the page. I need it to be flexible and synchronized with the top navbar.
Any help or suggestions are greatly appreciated!