Bootstrap 3 Navbar-Right No Padding with Navbar-Fixed-Top

bootstrap 3 navbar-right no padding with navbar-fixed-top

http://jsfiddle.net/jmJWr/

Needs a .container just inside the .navbar then adjust the css.

.navbar > .container {width:auto;}

In a few days or so 3.1.0 will come out, then you can use .container-fluid and remove that css.

The documentation is wrong, here is the thread in the repo: https://github.com/twbs/bootstrap/issues/11783

Bootstrap: Navbar not fixed to very top has like 40px padding?

Make your you body,html doesnt have any padding to,

html, body{
    margin:0px;
    padding:0px;
}

bootstrap navbar fixed top and body padding top

Just remove the padding-top in the else statement :

$(document).scroll(function(event) {

  var wintop = $(window).scrollTop(); // Winodw Scroll Positon
  var topArea = $('.top-area').outerHeight(); // Header Logo Div Height

  if (wintop > topArea) {
    $('.navbar-default').addClass('navbar-fixed-top'); // Fixed Menu
    $('body').css('padding-top', parseInt($('.navbar-fixed-top').css("height")) + 1);
  } else {
    $('.navbar-default').removeClass('navbar-fixed-top'); // Unfixed Menu
    $('body').css('padding-top', '0px');
  }
});

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

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.

twitter bootstrap navbar fixed top overlapping site

Your answer is right in the docs:

Body padding required
The fixed navbar will overlay your other content, unless you add padding to the top of the <body>. Try out your own values or use our snippet below. Tip: By default, the navbar is 50px high.
body { padding-top: 70px; }
Make sure to include this after the core Bootstrap CSS.

and in the Bootstrap 4 docs...

Fixed navbars use position: fixed, meaning they’re pulled from the
normal flow of the DOM and may require custom CSS (e.g., padding-top
on the ) to prevent overlap with other elements.

Fixed Bootstrap Navbar Not Working

.navbar {  padding: .8rem;}
.navbar-nav li {  padding-right: 25px;}
.nav-link {  font-size: 1.1em;}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"><!--Navigation--><nav class="navbar sticky-top navbar-expand-md navbar-light bg-light navbar-fixed-top" id="navbar">  <div class="container-fluid">    <a class="navbar-brand" href="index.html"><img src="#"></a>    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive">            <span class="navbar-toggler-icon"></span>            </button>    <div class="collapse navbar-collapse" id="navbarResponsive">      <ul class="nav navbar-nav nav-pills ml-auto">        <li class=nav-item active>          <a class="nav-link" href="#home">Home</a>        </li>        <li class=nav-item>          <a class="nav-link" href="#gallery">Gallery</a>        </li>        </li>        <li class=nav-item>          <a class="nav-link" href="#aboutme">About</a>        </li>        <li class=nav-item>          <a class="nav-link" href="#contact">Contact</a>        </li>      </ul>    </div></nav><div style="height: 5000px; background-color: red; width: 500px;"></div>

Bootstrap 3 Navbar-Right No Padding with Navbar-Fixed-Top