title: how to Fix Nav and Tab Both
body: <p><a href="http://jsfiddle.net/L1bns58m/1/" rel="nofollow noreferrer">http://jsfiddle.net/L1bns58m/1/</a></p>
  
  <p>Scripts are programmed to check whether my tab is on the top or not. If top just fixed it by updating/ adding the class sticky.</p>
  
  <p>Code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// This is my javaScript Code ....
  // which will check whether my tab is on the top or not... if top just fixed
  // it by updating/ adding the class sticky.
      window.onscroll = function() {cFunction()};
  
      var header = document.getElementById("myHeader");
      var sticky = header.offsetTop;
  
          function cFunction() {
        if (window.pageYOffset &gt;= sticky) {
          header.classList.add("sticky");
        }     else {
          header.classList.remove("sticky");
        }
        }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.btn-primary
          {
          font-size:12px;
          }
        .btn-group-justified {
             width:100%;
            }
        .sticky {
        position: fixed;
        top: 0;
        width: 100%;
      }
  
      .sticky + .content {
        padding-top: 102px;
      }
  
      .section{
      width:100%;
      }
  
        }
      }&lt;/script&gt;
  
      &lt;/body&gt;
      &lt;/html&gt;</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
      &lt;nav class="navbar navbar-inverse navbar-fixed-top"&gt;
        &lt;div class="container-fluid"&gt;
          &lt;div class="navbar-header"&gt;
            &lt;a class="navbar-brand" href="#"&gt;WebSiteName&lt;/a&gt;
          &lt;/div&gt;
          &lt;ul class="nav navbar-nav"&gt;
            &lt;li class="active"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Page 1&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Page 2&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Page 3&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
      &lt;/nav&gt;
  &lt;!-- MY Tab Code below the NAV Section 
  
  This is My tab bar consisting of bootstrap button group. --&gt;
  
      &lt;section&gt;
      &lt;div class="container" id="myHeader"&gt;
        &lt;div id="no" class="btn-group btn-group-justified"&gt;
          &lt;a href="#" class="btn btn-primary"&gt;Rates&lt;/a&gt;
          &lt;a href="#" class="btn btn-primary"&gt;What to Expect&lt;/a&gt;
          &lt;a href="#" class="btn btn-primary"&gt;Our Professionals&lt;/a&gt;
          &lt;/div&gt;
      
          &lt;div id="yes" class="btn-group btn-group-justified"&gt;
          &lt;a href="#" class="btn btn-primary"&gt;Reviews&lt;/a&gt;
          &lt;a href="#" class="btn btn-primary"&gt;Recent Bookings&lt;/a&gt;
          &lt;a href="#" class="btn btn-primary"&gt;FAQs&lt;/a&gt;
          &lt;a href="#" class="btn btn-primary"&gt;Related Blogs&lt;/a&gt;
   
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>How to fix both navbar and tab? Actually, I want to fix my tab bar below my Navbar.<br> I just tried to change the top from 0 to some +ve value but nothing changed.also used position :fixed.</p>