Щебетать над боковым расположением ботстрапа под навигационной панелью не позади

Question

Я использую боковую панель и верхнюю панель навигации с бутстрапом. Я хочу всегда видеть боковую панель, независимо от того, какой размер занимает верхняя панель навигации.

Боковая панель отображает ОК, однако, когда я делаю экран более узким (1/2 экрана на рабочем столе), верхняя панель навигации занимает 2 ряда (3 или 4 строки, если она уже) и перекрывает верхнюю часть боковой панели, заслоняя верхнюю боковые ссылки.

Проблема возникает только при включении навигационного блока справа, как показано ниже.

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> 

ток 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; 
    } 
} 

пера здесь (извинения, если немного многословный)

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

навигационная панель накрывает боковую панель на вдове размер между шириной 765 и 840 пикселей в кодефене.

Любые идеи о том, как всегда видеть элементы боковой панели (но не перекрывать верхнюю панель навигации)?

Answer 1

Вы можете изменить верхнюю позицию боковой панели, используя javascript, в соответствии с высотой навигатора. Вот пример (добавлена ​​Jquery, JS код и идентификаторы для ваших навигационных так JS отделен от классов стайлинга):

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) 
})