CODEWITHSUNDEEP
csshtmltwitter-bootstraptwitter-bootstrap-3
shapeare
shapeare

Reputation: 4233

Bootstrap: dropdown menu covers content

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.

Upvotes: 4

Views: 6408

Answers (4)

DaniP
DaniP

Reputation: 38252

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

Upvotes: 6

Izzy
Izzy

Reputation: 6866

I faced this issue when I first started using Bootstrap. When you use the class navbar-fixed-top the navbar will stay at the top of the page. Remove this and then it'll work as expected.

Upvotes: 3

dotty
dotty

Reputation: 41433

You are seeing the intended behaviour for the fixed navigation. If you remove the .navbar-fixed-top class on the navigation it removes the 'stickiness' of the navigation and it'll follow the content flow.

You can a sample at http://jsfiddle.net/qba2xgh6/4/ , I also removed the margin from the .main as it's not needed anymore.

Upvotes: 4

ckuijjer
ckuijjer

Reputation: 13814

Remove the class navbar-fixed-top from the outermost <div>

Upvotes: 5

Related Questions