bootstrap navbar menu overlaps text - html

Question

im using the latest version of bootstrap and when i resize the screen browser the navbar, when dropped down with the small toggle button overlaps the text on the page instead of pushing page content down. I have researched the problem several times. I tried putting padding-bottom on the navbar and padding-top on the body. I have tried numerous other things suggested but nothing is working. Appreciate any help.
This is the html code:
<div class="navbar navbar-inverse 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>
<div class="navbar-brand navbar-brand-left" href="#"><img src="somepicture"></div>
</div>
<div class="collapse navbar-collapse" id="navbar-brand-centered"">
<ul class="nav navbar-nav">
<li>Home</li>
<li>What's On</li>
<li>About Us</li>
<li>Parties</li>
<li>Gallery</li>
<li>Menu</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Share<span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Facebook</li>
<li>Twitter</li>
</ul>
<li>Contact Us</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
the css i have used was to only apply color/font/font size etc, nothing that would have contributed to this problem. Its a basic and simple brochure website and im sure the problem is probably right in front of my eyes but im not experienced enough to notice as im only learning, but still would appreciate anyone that could help.
The navbar works perfectly fine and the way its supposed to in a normal size desktop but the problem is only when i resize the browser to a mobile phone size.
This is a url of an image of the problem to make it easier to understand:
http://s1368.photobucket.com/user/oliviah452/media/Screenshot2_zpsc9ffafb1.png.html

Answer 1

Cleaned up your code a bit in the process, but if you set your navbar to be navbar-static-top rather than navbar-fixed-top, your content will get pushed down when the collapsed menu is expanded.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<div class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="container-fluid">
<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>
<div class="navbar-brand navbar-brand-left" href="#">
<a href="index.html">
<img src="somepicture"></img>
</a>
</div>
</div>
<div class="collapse navbar-collapse" id="navbar-brand-centered">
<ul class="nav navbar-nav">
<li>Home
</li>
<li>What's On
</li>
<li>About Us
</li>
<li>Parties
</li>
<li>Gallery
</li>
<li>Menu
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Share<span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Facebook
</li>
<li>Twitter
</li>
</ul>
<li>Contact Us
</li>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>Test
<br />Test
<br />Test
<br />Test
<br />Test
<br />Test
<br />Test