Twitter Bootstrap sidebar position below navbar not behind it

Question

I am using a sidebar and top-nav bar with bootstrap. I want to always see the sidebar, no matter what size the top navbar is.

The Sidebar displays OK however when I make the screen narrower (1/2 screen on desktop) the top navbar takes up 2 rows (3 or 4 row if narrower) and overlies the top part of the sidebar, obscuring the upper sidebar links.

The problem only occurs when I include the navbar-right block shown below.

html:

<div class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
        ...
    </ul>
    <!-- The problem occurs with this ul block below -->
    <ul class="nav navbar-nav navbar-right">
        ...
    </ul>

current css:

div.navbar {
  z-index: 999;
}
.top-nav {
    padding: 0 15px;
}
@media(min-width:768px) {
    body {
        margin-top: 50px;
    }
}
@media(min-width:768px) {
    .side-nav {
        position: fixed;
        top: 51px;
        left: 225px;
        width: 225px;
        margin-left: -225px;
        border: none;
        border-radius: 0;
        overflow-y: auto;
        background-color: white;
        bottom: 0;
        overflow-x: hidden;
        padding-bottom: 40px;
    }
}

pen is here (apologies if a little verbose)

https://codepen.io/hf7dpr/pen/ggzVpd

The navbar overlies the sidebar on widow resize between 765 and 840px width in the codepen..

Any ideas on how to always see the sidebar items (but not overlie the top navbar)?

Answer 1

You can change sidebar's top position using javascript, according to navbar height. Here's an example (added jQuery, js code and id's for your nav's so js is separated from styling classes):

https://codepen.io/themeler/pen/MJXEpE

$(function () {
  var calculateHeight = function () {
    $('#side-nav').css('top', $('#navbar').height() + 'px')
  }
  // init
  calculateHeight()
  // recalculate on window resize
  $(window).on('resize', calculateHeight)
})