title: How to make bootstrap navbar to push down the whole page on mobile menu?
body: <p>Although there is <a href="https://stackoverflow.com/questions/11971372/how-can-i-get-twitter-bootstraps-mobile-navbar-to-overlay-the-content-on-the-pag">a related question</a>, his problem seems like my solution but I have no Idea to make progress.</p>
  
  <p>I'm using bootstrap navbar that is fixed to the top to make.. navigation menu.
  on mobile pages(where screen size is small), I have to bring them by pressing some menu button on top-rightmost corner.</p>
  
  <p>however when the menu pops up, I'd like it to <strong>push the page down, instead of overlaying it.</strong></p>
  
  <p>here's my code.. what edit should I make to get rid of overlaying?</p>
  
  <pre><code>&lt;div class="navbar navbar-default navbar-fixed-top" role="navigation"&gt;
      &lt;div class="container"&gt;
          &lt;div class="navbar-header"&gt;
              &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"&gt;
                  &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
                  &lt;span class="icon-bar"&gt;&lt;/span&gt;
                  &lt;span class="icon-bar"&gt;&lt;/span&gt;
                  &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;/button&gt;
              &lt;a class="navbar-brand" href="#!/"&gt;Brand&lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="navbar-collapse collapse"&gt;
              &lt;ul class="nav navbar-nav"&gt;
                  &lt;li&gt;&lt;a href="#!/notice"&gt;notice&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#!/board"&gt;board&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
  
              &lt;ul class="nav navbar-nav navbar-right"&gt;
                  &lt;li&gt;
                  &lt;a id="a-logout" href="#!/logout"&gt;sign out&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                  &lt;a href="#!/user"&gt;Your page&lt;/a&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>