How to make bootstrap navbar to push down the whole page on mobile menu?

Although there is a related question, his problem seems like my solution but I have no Idea to make progress. 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. however when the menu pops up, I'd like it to push the page down, instead of overlaying it. here's my code.. what edit should I make to get rid of overlaying? ``` <div class="navbar navbar-default navbar-fixed-top" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#!/">Brand</a> </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li><a href="#!/notice">notice</a></li> <li><a href="#!/board">board</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li> <a id="a-logout" href="#!/logout">sign out</a> </li> <li> <a href="#!/user">Your page</a> </li> </ul> </div> </div> </div> ```