title: Bootstrap 3 navbar-fixed-top overlaps with content
body: <p>I am using Bootstrap 3 to create a page that contains a navbar which needs to be fixed (navbar-fixed-top) and a table below. The table is displayed correctly when I just use navbar-default. As soon as I add navbar-fixed-top, the table header seems to go under the navbar. Anything I am missing here ? The sample is available in Plnkr as well : <a href="http://plnkr.co/edit/cNVjIDI6C4vOKMHVWWrT?p=preview" rel="nofollow">http://plnkr.co/edit/cNVjIDI6C4vOKMHVWWrT?p=preview</a></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html ng-app="myApp"&gt;
  
  &lt;head&gt;
      &lt;title&gt;Interaction Summary Comparision View&lt;/title&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
  
      &lt;link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css"&gt;&lt;/link&gt;
  
      &lt;script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular-animate.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.0.1/ui-bootstrap-tpls.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.1/angular-ui-router.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/spin.js/2.3.2/spin.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular-spinner/0.8.1/angular-spinner.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="//cdn.rawgit.com/adonespitogo/angular-loading-spinner/master/angular-loading-spinner.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/restangular/1.5.2/restangular.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/PapaParse/4.1.2/papaparse.min.js"&gt;&lt;/script&gt;
  
      &lt;style&gt;
          .full button span {
              background-color: limegreen;
              border-radius: 32px;
              color: black;
          }
  
          .partially button span {
              background-color: orange;
              border-radius: 32px;
              color: black;
          }
      &lt;/style&gt;
  
      &lt;!-- Angular logic --&gt;
      &lt;script&gt;
          // Angular App
          var app = angular.module('myApp', ['ui.router', 'ui.bootstrap', 'ngAnimate', 'restangular', 'ngLoadingSpinner']);
  
          app.factory('dataService', function($http, Restangular) {
  
              var exports = {};
  
              exports.getRestangular = function() {
                  return Restangular.setBaseUrl("https://cdn.rawgit.com/venkyvb/164b6c12a4f8bc72a02b12234a32bc9c/raw/daa51de397e90387ef51e07e25e971f24c667d0c");
              }
  
              exports.getData = function() {
                  return exports.getRestangular().all("summary.json").getList();
              }
  
              return exports;
          });
  
          // Controllers  
          app.controller('SummaryController', function($scope, $rootScope, $filter, dataService) {
              $scope.summary = [];
  
              dataService.getData().then(function(data) {
                      $scope.summary = data.plain();
                  },
                  function(data) {
                      // Error
                  });
  
              $scope.downloadCsv = function() {
                  window.open('data:text/csv;charset=utf-8,' + escape(Papa.unparse(angular.toJson($scope.summary))));
              };
  
          });
  
  
          app.config(function($stateProvider, $urlRouterProvider) {
  
              $urlRouterProvider.otherwise('/');
  
              var summaryList = {
                  name: 'SummaryList',
                  url: '/',
                  templateUrl: '/summary_list.html',
                  controller: 'SummaryController',
              };
  
              $stateProvider.state(summaryList);
  
          });
      &lt;/script&gt;
      &lt;!-- Templates --&gt;
      &lt;script type="text/ng-template" id="/summary_list.html"&gt;
          &lt;div class="container-fluid"&gt;
              &lt;div class="row"&gt;
                  &lt;div class="col-sm-12"&gt;
                      &lt;nav class="navbar navbar-default navbar-fixed-top"&gt;
                          &lt;div class="container-fluid"&gt;
                              &lt;div class="navbar-header"&gt;
                                  &lt;a class="navbar-brand" href="#"&gt;Summary View&lt;/a&gt;
                              &lt;/div&gt;
                              &lt;ul class="nav navbar-nav navbar-right"&gt;
                                  &lt;li&gt;
                                      &lt;a href="#" ng-click="downloadCsv()"&gt;&lt;span class="glyphicon glyphicon-download-alt" title="Download CSV"&gt;&lt;/span&gt;&lt;/a&gt;
                                  &lt;/li&gt;
                              &lt;/ul&gt;
                              &lt;form class="navbar-form navbar-right"&gt;
                                  &lt;div class="form-group"&gt;
                                      &lt;input type="text" class="search form-control" ng-model="search.$" placeholder="Search in table"&gt;
                                  &lt;/div&gt;
                              &lt;/form&gt;
                          &lt;/div&gt;
                      &lt;/nav&gt;
                  &lt;/div&gt;
                  &lt;div class="col-sm-12"&gt;
                      &lt;div class="panel panel-default"&gt;
                          &lt;div class="table-responsive"&gt;
                              &lt;table class="table table-hover" ts-wrapper&gt;
                                  &lt;thead&gt;
                                      &lt;th&gt;E2E time&lt;/th&gt;
                                      &lt;th&gt;Server time&lt;/th&gt;
                                      &lt;th&gt;Step&lt;/th&gt;
                                      &lt;th&gt;Total&lt;/th&gt;
                                  &lt;/thead&gt;
                                  &lt;tr ng-repeat="entry in summary | filter:search" ts-repeat&gt;
                                      &lt;td&gt;{{ entry.e2e_time }}&lt;/td&gt;
                                      &lt;td&gt;{{ entry.server_time }}&lt;/td&gt;
                                      &lt;td&gt;{{ entry.step }}&lt;/td&gt;
                                      &lt;td&gt;{{ entry.total_transactions }}&lt;/td&gt;
                                  &lt;/tr&gt;
                              &lt;/table&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/script&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div class="container-fluid"&gt;
          &lt;span us-spinner="{radius:30, width:8, length: 16}"&gt;&lt;/span&gt;
          &lt;div data-ui-view&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>