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

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"><a href="#">My Home</a></li>
                    <li><a href="#">Menu 1 </a></li>
                    <li><a href="#">Menu 2</a></li>
                    <li><a href="#">Menu 3</a></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:

If you are just looking for the breakpoints for various screen sizes, then have a look at this answer to find the `media-query` https://stackoverflow.com/questions/19592968/bootstrap-3-breakpoints-and-media-queries. — Martin, Nov 17 '19 at 07:22
@Martin, thanks for the link. it was helpful but the issue was more complicated. — joedotnot, Nov 17 '19 at 11:54

score 0 · Accepted Answer · answered Nov 17 '19 at 13:24

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.

Setting aside performance or readability concerns aside, IMO, at least for maintenance purposes it is best if you handle all the styling in CSSes alone. You can achieve the same result by finding the element that gets the `sticky-top` style and overriding the style value using `!important`. You can use `media-query` to make sure that the change is applied only for certain use cases. — Martin, Nov 17 '19 at 19:22
@Martin, if you know how to use CSS alone, please fork my pen, and modify it accordingly. Then post it as an answer :-) — joedotnot, Nov 17 '19 at 21:14

score 0 · Answer 2 · answered Nov 18 '19 at 01:42

0

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.

answered Nov 18 '19 at 01:42

Martin

644
5
11

I used a FIXED navbar for a reason; to make the MENU stay visible at all times, never scrollable off the screen. If i wanted to make it relative as you have, I would have used STATIC navbar, which is already relative by default ! Thanks anyway. – joedotnot Nov 18 '19 at 02:17

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

2 Answers2