dynamic bootstrap 3 navbar fixed top overlapping content

Question

I found other questions that address a similar problem, but this is slightly different, as the top bar content is dynamically changed. That means I don;t know at which screen width the bar will begin overlapping content.

This CSS works at a standard resolution with the current top bar text. I know I can use @media (max-width) in CSS to adjust the padding-top, but that doesn't account for dynamically changing top bar text.

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

Is there a way to check the top bar's height, and add an offset to the body without using Javascript?

Another, perhaps better, option is to switch the top bar to the mobile view whenever it gets too crowded for a single row. Any thoughts on how to do that?

Thanks

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

Original fixed top example.

---

EDIT: updated jsfiddle with javascript fix https://jsfiddle.net/4c2yespy/8/

Answer 1

There is no way to do this wit css only, but you could use the javascript resize event to dynamically change the body padding top:

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

$(window).resize(adjust_body_offset);

$(document).ready(adjust_body_offset);