bootstrap navbar menu overlaps text

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="#"><a href="index.html"><img src="somepicture"></a></div>
    </div>
    <div class="collapse navbar-collapse" id="navbar-brand-centered"">
      <ul class="nav navbar-nav">
         <li><a href="someurl">Home</a></li>
         <li><a href="someurl" id="active2">What's On</a></li>
         <li><a href="someurl">About Us</a></li>
         <li><a href="someurl">Parties</a></li>
        <li><a href="someurl">Gallery</a></li>
        <li><a href="someurl">Menu</a></li>
      </ul>
     <ul class="nav navbar-nav navbar-right">
    <li><a href="#" class="dropdown-toggle" data-toggle="dropdown">Share<span class="caret"></span></a>
              <ul class="dropdown-menu" role="menu">
                <li><a href="someurl">Facebook</a></li>
                <li><a href="someurl">Twitter</a></li>
              </ul>
        <li><a href="someurl">Contact Us</a></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

Solution

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><a href="someurl">Home</a>

        </li>
        <li><a href="#" id="active2 ">What's On</a>

        </li>
        <li><a href="#">About Us</a>

        </li>
        <li><a href="#">Parties</a>
        </li>
        <li><a href="#">Gallery</a>

        </li>
        <li><a href="#">Menu</a>

        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#" class="dropdown-toggle" data-toggle="dropdown">Share<span class="caret"></span></a>

          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Facebook</a>

            </li>
            <li><a href="#">Twitter</a>

            </li>
          </ul>
          <li><a href="#">Contact Us</a>

          </li>
        </li>
      </ul>
    </div>
    <!--/.nav-collapse -->
  </div>
</div>Test
<br />Test
<br />Test
<br />Test
<br />Test
<br />Test
<br />Test

Comments

[MattD]

How didnt it work? What did it do on your site? Elaborate please so I or someone else can help you find the right answer.

[DecafOyster208]

all it did was push the page content down, when the browser was resized the navbar still overlapped the text, i dont know why.

[MattD]

Repost your code reworked with my suggestion. Along with any relevant CSS and JavaScript.

[Admin]

This worked for me except with one little flaw - it put a band of all white space ABOVE the navbar. Any ideas on how to take care of that?

[MattD]

@user2075599, double check the CSS being used on the page. Also look over the official documentation to make sure you haven't included something you shouldn't have. If you went from fixed to static, make sure you no longer have body{ padding-top: 70px; } in your CSS, as that was required for the fixed version. Remember: when in doubt, use your browser's development tools to inspect the page itself to find out what's going on.

[Jankapunkt]

Had a similar whitespace issue, just realized, that my navbar was inside my content container (container-fluid).