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

The fixed navbar demands a padding or margin to the body as outlined in the docs. Since it's probably set in pixels, it doesn't change when things wrap. see also: http://stackoverflow.com/questions/11124777/twitter-bootstrap-navbar-fixed-top-overlapping-site — BReal14, Nov 07 '14 at 18:46
Ya i tried this before and i just tried again but all this does is push the page content down in general not when I press the toggle button to dropdown the menu when the browser is resized if that makes sense? the text of the navbar still overlaps the page content — DecafOyster208, Nov 07 '14 at 18:58
The JS alone works fine... http://www.bootply.com/Ey7iLyIsTo I doubled the menu up a few times to force line breaking (bootply doesn't let you shrink the viewport much) — BReal14, Nov 07 '14 at 19:05

MattD · Accepted Answer · 2016-03-28T21:58:40.883

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

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. — MattD, Nov 08 '14 at 14:42
all it did was push the page content down, when the browser was resized the navbar still overlapped the text, i dont know why. — DecafOyster208, Nov 09 '14 at 11:18
Repost your code reworked with my suggestion. Along with any relevant CSS and JavaScript. — MattD, Nov 09 '14 at 13:42
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? — , Apr 22 '17 at 08:28
@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. — MattD, Apr 22 '17 at 13:45
Had a similar whitespace issue, just realized, that my navbar was inside my content container (container-fluid). — Jankapunkt, Sep 07 '17 at 08:59

bootstrap navbar menu overlaps text

1 Answers1

Linked