Twitter Bootstrap Navigation Bar Fixed

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.

How to place right side fixed navigation bar in Twitter bootstrap

You actually need to use navbar-right, as I found out from here and used in my code:

        <div class="navbar-collapse collapse navbar-right" >
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#contact">Contact</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
                    <ul class="dropdown-menu pull-right" role="menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li class="divider"></li>
                        <li class="dropdown-header">Nav header</li>
                        <li><a href="#">Separated link</a></li>
                        <li><a href="#">One more separated link</a></li>
                    </ul>
                </li>
            </ul>
        </div><!--/.nav-collapse -->

Is it possible to use Twitter Bootstraps .navbar-fix-to-top only on mobile devices?

you can use a media query for that, something like this:

@media screen and (max-width: 480px)  
{
    nav.navbar
    {
       margin: auto; /*or the margin that you need*/
    }   
}

Multiple fixed top navbar headers in Twitter Bootstrap 3

The code below is a basic start using two navbars and affix.

HTML

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Brand</a>
    </div>
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div><!-- /.container-fluid -->
</nav>
<div class="divide-nav">
  <div class="container">
    <p class="divide-text">Some Text Here</p>
  </div>
</div>
<nav class="navbar navbar-default navbar-lower" role="navigation">
  <div class="container">
    <div class="collapse navbar-collapse collapse-buttons">
      <form class="navbar-form navbar-left" role="search">
        <button class="btn btn-success">Button</button>
        <button class="btn btn-default">Button</button>
        <button class="btn btn-default">Button</button>
        <button class="btn btn-default">Button</button>
      </form>
    </div>
  </div>
</nav>
<div class="container">
  <div class="row">
    <div class="filler"></div>
  </div>
</div>

CSS

body{
  margin-top: 50px;
}

.divide-nav{
  height: 50px;
  background-color: #428bca;
}

.divide-text{
    color:#fff;
    line-height: 20px;
    font-size:20px;
    padding: 15px 0;
}

.affix {
  top: 50px;
  width:100%;
}

.filler{
  min-height: 2000px;
}

.navbar-form {
   padding-left: 0;
}

.navbar-collapse{
   padding-left:0; 
}

JavaScript

$('.navbar-lower').affix({
  offset: {top: 50}
});

Multiple fixed top navbar headers in Twitter Bootstrap 3 not working properly?

You used navbar-static-top for your second navbar. You have to use navbar-fixed-top for both navbars so they stay at the top of the page when you scroll. You will also have to add some space (equal to the height of the first navbar) from the top for the second navbar (equal to the height of the first navbar) to avoid overlapping, like this: top:50px;
Here is an update of your code on Bootply: http://www.bootply.com/Xd04ROsODx

Twitter Bootstrap: How to make top fixed navbar stay in container and not stretch?

You should be able to do:

<div class="navbar-fixed-top container">
  <div class="navbar">
    <div class="navbar-inner">
      <a class="brand" href="#">Title</a>
      <ul class="nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
      </ul>
    </div>
  </div>
</div>

How to place a fixed div above twitter bootstrap nav menu

Move <div id="Intro">above the navbar code:

<div id="Intro">
This is page is created with bootstrap
</div>
<div class="navbar navbar-inverse navbar-fixed-top">

Add some space on top of navbar-fixed:

.navbar-fixed-top {
  top: 20px;

Make this size the height you want for <div id="Intro">

Add additional styling to <div id="Intro">

#Intro {
  top: 0;
  position: fixed;

EDITED:
Additional styling for intro div. Add some dimensions and background color to intro div. Try this :

 #Intro {
     top: 0;
     position: fixed;
     background-color: #fff;
     height: 40px;
     width: 100%;

  }

twitter bootstrap fix navbar after scrolling

Once the nav becomes affix it no longer follows the normal navbar CSS styles. You could give an id to the outer DIV container, and then set this as the `affix' element. Use CSS to make sure it stays 100% width.

#nav.affix {
    position: fixed;
    top: 0;
    width: 100%
}

Working Demo

Related:

Affix Bootstrap flickers after affix-bottom reached and scrolling back top