Geek Answers Handbook

Boot menu: boot menu covers content

My code is saved http://jsfiddle.net/qba2xgh6/1/ , it comes from the official Bootstrap 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 drop-down button in the upper right corner, a drop-down menu will appear and cover the main content. How can i avoid this? I would like him to click the main content.

+4
source share
4 answers

This is because you are using a class navbar-fixed-topthat makes navbar stay fixed - from the stream in the document. You can:

  • . .

  • , , -:

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

DemoFiddle

+6

navbar-fixed-top <div>

+4

fixed navigation. .navbar-fixed-top , "" , .

http://jsfiddle.net/qba2xgh6/4/, .main, .

+4

, Bootstrap. navbar-fixed-top, . , , .

+4

More articles:


All Articles