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:

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

Solution 2:

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

Solution 3:

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.

Solution 4:

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.

Share