title: two navigations main navi on fixed top and sub navi stickey
body: <p>I am doing a web page with <strong>bootstrap</strong>. Main navigation is on fixed top position. Sub navigation is below the banner. When scrolling both should be on top of the page sub navigation should stop below the main navigation with a background colour change. Anyone can help me?</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-css lang-css prettyprint-override"><code>@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css');
  
  
  &lt;style type="text/css"&gt;
  
  .innernav{
   background-color:#FFF;
   font-family: 'Droid Serif', serif;
      color:#212121;
   font-size:14px;
   text-transform:uppercase;
   margin-bottom:20px;
  }
  .navbar .navbar-header,
  .navbar-collapse {
      float:none;
      display:inline-block;
      vertical-align: top;
      padding-left: 0;
      padding-right: 0;
  }
  .innernav .navbar-inner &gt; .container {text-align:center; }
  
  .inner-banner{
   height:430px;}
   
  .inside{
   background:url(../images/inside_bg.png) repeat-x;
   background-position:50% 50%;}
   
  .inside .navbar-nav{
   background-color:#FFF;
  }
  .no-horizontal-padding {
      padding-right: 0 !important;
      padding-left: 0 !important;
  }
  .affix {
   top: 0;
   width: 100%;
   background-color: #d52027;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!-- star main navbar --&gt;
  &lt;div class="container innernav"&gt;
    &lt;nav class="navbar navbar-default navbar-fixed-top"&gt;
      &lt;div class="container text-center"&gt;
        &lt;div class="navbar-header"&gt; &lt;a class="navbar-brand" href="#"&gt;&lt;img src="images/logo-inner.jpg"&gt;&lt;/a&gt; &lt;/div&gt;
        &lt;div id="navbar" class="navbar-collapse"&gt;
          &lt;ul class="nav navbar-nav"&gt;
            &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;About us&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;our products&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;about tea&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;media&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;contact us&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;locater&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/nav&gt;
  &lt;/div&gt;
  
  &lt;!-- end main navbar --&gt;
  &lt;/div&gt;
  &lt;section id="banner"&gt;
    &lt;div class="container-fluid"&gt;
    &lt;!--start banner ares--&gt;
      &lt;div class="row"&gt; 
       &lt;div class="inner-banner"&gt;
           &lt;!--**********banner area************--&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;!--end banner ares--&gt; 
    &lt;/div&gt;
  &lt;/section&gt;
  
  &lt;section id="main-content"&gt; 
  &lt;!--start inner page navi--&gt;
    &lt;div class="container-fluid no-horizontal-padding"&gt;
      &lt;div class="row"&gt;
        &lt;div class="col-md-12"&gt;
          &lt;nav class="navbar navbar-default inside" data-spy="affix" data-offset-top="400"&gt;
            &lt;div class="container text-center"&gt;
              &lt;div id="navbar" class="navbar-collapse"&gt;
                &lt;ul class="nav navbar-nav"&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Overview&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Our Story&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Our Team&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Global presence&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Certification&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt; Our Facilities&lt;/a&gt;&lt;/li&gt;
                &lt;/ul&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/nav&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;!--end inner page navi--&gt;
     &lt;div class="container-fluid"&gt;
     
      &lt;!--******body content*****--&gt;
     
     &lt;/div&gt;
    &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>here is my code
  <a href="https://jsfiddle.net/prasha/zd6yecgm/" rel="nofollow noreferrer">https://jsfiddle.net/prasha/zd6yecgm/</a></p>