Bootstrap Fixed Navbar.. how to adjust the content padding-top dynamically? - twitter-bootstrap-3

Question

This question is for Bootstrap v3.3.7 and upwards (prior to v4).
I am using navbar-fixed-top; when the small screen break-point kicks in, and the navbar height expands when opened, i want to push down the content to be below the navbar (in much the same way that the navbar-static-top works).
How to do it? my approach would be to write a specific CSS rule for it. But how can I know at exactly what value the small screen break-point kicks in?
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header pull-right">
<!-- this is the hamburger, shown on smaller width screens -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">My Home</li>
<li>Menu 1 </li>
<li>Menu 2</li>
<li>Menu 3</li>
</ul>
</div>
</div>
</div>
<section id="content">
<h3>using Fixed-navbar</h3>
<p>This uses <strong>FIXED NAVBAR (navbar-fixed-top)</strong>, which means navbar DOES NOT scroll out of view... i.e. it remains VISIBLE at all times.<br/>
However, it does NOT push the content down (the pink section) when the navbar needs to expands via the Hamburger button
</p>
<p>Sed dignissim blah etc...</p>
</section>
Codepen here:

Answer 1

Here is my own answer:
At first i tried playing with the transitionend event, but it proved to be unreliable to solve my problem; not because in itself it is unreliable, but because the nav height was not updating soon enough after transition ends.
So i resorted to polling, and other logic which works reliably
let navContainer$ = $("div.navbar > div.container");
let collapsedDiv$ = $("div.navbar > div.container > div.collapse");
let intervalHandle;
//on hamburger click...
$("button.navbar-toggle").click(() => {
let heightBeforeTrx = navContainer$.height();
console.error( 'heightBeforeTrx:', heightBeforeTrx ) //= 50
if (heightBeforeTrx === 50) {
//we are moving from collapsed to Expanded...
intervalHandle = setInterval( () => {
console.log('Yo keep polling...')
//we expect...a class 'collapse.in' to exist once expanded
let test1 = collapsedDiv$.hasClass( "in" );
if (test1) {
//STOP THE POLLING...
clearInterval(intervalHandle);
console.log('polling ended.')
$("body").css('padding-top', '176px')
}
}, 100 )
} else {
//we are moving from Expanded to Collapsed...
intervalHandle = setInterval( () => {
console.log('Yo keep polling...')
//we expect...a class 'collapse.in' to NOT exist once collapsed
let test2 = collapsedDiv$.hasClass( "in" );
if (!test2) {
//STOP THE POLLING...
clearInterval(intervalHandle);
console.log('polling ended.')
$("body").css('padding-top', '50px')
}
}, 100 )
}
})
Good enough for now, the 176px hardcoding should be adjusted accordingly; Only caters for 2 use-cases, there are other heights possible when the width gets even smaller, but i'll ignore those; also need additional jQuery for pushing content back up if re-sizing window manually, after it has been expanded from hamburger click.

Answer 2

Here is a codepen where you can see css only changes to push the content down when navbar is expanded. The only thing I have added is a new css class called mycss (not named correctly, i agree :)). You can change the media query based on your exact requirements.
Also, it might be worth looking at bootstrap-4.3, as it looks like they already have something like this out of the box.