Bootstrap collapsed menu not pushing content down when expanded

Question

I am using Twitter Bootstrap to play around with the responsive side of a website. I am having a problem however with the smaller widths where the collapsed menu is going ov

Answer 1

navbar-fixed-top.

Having this prevents the pushdown native property of the accordion. You have to massage it out with your own javascript or css.

Answer 2

THIS WORKS!!

Had the same issue and all the answers here revert to a static nav bar which is not what you're looking for.

Throw a blank div tag (with height) after the nav bar but before the start of your content. This empty div pushes the content down and remains hidden behind the nav bar. Use javascript/jquery to toggle on the div for the two mobile widths.

HTML

</nav>
<div class="container main">
<div id="pushContent"></div>

CSS

@media (max-width: 767px) {
    #pushContent {
    height: 222.5px;
    width:100%;
    display: none;
    }
}

@media (max-width: 480px) {
    #pushContent {
    height: 222.5px;
    width:100%;
    display: none;
    }
}

Javascript/jquery

$('.navbar-toggle').on("click", function(){
    $('#pushContent').slideToggle();
});

Answer 3

Mention one "id" in data-target and add that "id" in the "div" which have collapse navbar code. As below:

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="container">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <h1 class="logo-title">
                <a href="index.html"><span>Logo</span></a>
            </h1>
          </div>
          <div class="collapse navbar-collapse" id="navbar">
            <ul class="nav navbar-nav">
              <li class="active"><a href="index.html">item1</a></li>
              <li><a href="#">item2</a></li>
              <li><a href="#">item3</a></li>
              <li><a href="#">item4</a></li>
            </ul>
          </div><!--/.nav-collapse -->
        </div>
      </div>

This data-target calls a particular "id" and on the base of that your navbar will toggle.

Answer 4

I don't know. This seems to work... (kind of a hack though).

.navbar-fixed-top {
  top: -70px; /* you'll have to figure out the exact number here */
}

.navbar-fixed-top, .navbar-fixed-bottom {
  position: relative; /* this can also be static */
}

Answer 5

Also to avoid the white space created below the navbar, add the following line to the first "div" after the navbar, e.g: jumborton

.jumbotron {
    margin-top: -20px;
}

Answer 6

If you are using a fixed navbar expanding the menu won't push down the content. For that you have to use static header itself. Check the bootstrap example link you gave as reference.

<nav class="navbar navbar-light bg-light navbar-expand-lg static-top">