Bootstrap: dropdown menu covers content

Question

My code is save at http://jsfiddle.net/qba2xgh6/1/ , it comes from the Bootstrap official website.

Below is the code:

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" 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="index.php">My Brand</a>
    </div>
    <div class="collapse navbar-collapse navbar-right">
      <ul class="nav navbar-nav">
        <li><a href="index.php">Home</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </div><!--/.nav-collapse -->
  </div>
</div>

<div class="container main">
  <p>
    Hello, the main content starts here.
    Hello, the main content starts here.
    Hello, the main content starts here.
    Hello, the main content starts here.
    Hello, the main content starts here.
    Hello, the main content starts here.Hello, the main content starts here.
  </p>
</div>

The problem is that when I clicked the dropdown button at the right upper corner, the dropdown menu appears and covers the main content. How can I avoid this? I would like it to push down the main content.

Answer 1

That's because you are using the class navbar-fixed-top that makes the navbar stay fixed -- out of the flow on the document. You can:

• Remove that class. But it will delete the behavior on all devices and resolutions too.

• If you want to keep that for all but not for mobile then add this media query:

  @media (max-width:768px) {
      .main {
          margin-top:0;
      }
      .navbar-fixed-top {
          position:static;
      }
  } 
  

Check this DemoFiddle