динамический бутстрап 3 navbar фиксированный верхний перекрывающий контент

Question

Я нашел otherquestionsthat адресует аналогичную проблему, но это немного отличается, так как содержимое верхней панели динамически изменяется. Это означает, что я не знаю, на какой ширине экрана панель начнет перекрывать контент.

Этот CSS работает со стандартным разрешением с текущим верхним текстом панели. Я знаю, что я могу использовать @media (max-width) в CSS для настройки padding-top, но это не учитывает динамически изменяющийся текст верхнего бара.

body { 
    min-height: 2000px; 
    padding-top: 70px; 
} 

Есть ли способ, чтобы проверить высоту верхней панели, и добавить смещение к телу без использования Javascript?

Другой, возможно, лучший вариант - переключить верхнюю панель на мобильный вид, когда он становится слишком многолюдным для одной строки. Любые мысли о том, как это сделать?

Благодаря

https://jsfiddle.net/waspinator/4c2yespy/7/embedded/result/

Original fixed top example.

---

EDIT: обновленный jsfiddle с Javascript исправить https://jsfiddle.net/4c2yespy/8/

Answer 1

Там нет никакого способа сделать это только остроумие CSS, но вы можете использовать JavaScript размер события динамически изменять тело обивка верх:

function adjust_body_offset() { 
    $('body').css('padding-top', $('.navbar-default').outerHeight(true) + 'px'); 
} 

$(window).resize(adjust_body_offset); 

$(document).ready(adjust_body_offset);