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 over the content of the page, rather than pushing it down.

I used this example to build my navigation:

http://getbootstrap.com/examples/navbar-fixed-top/

Looking at the example, it doesn't push the content down either.

I've seen some answers to this to use padding on the body, but this has not worked for me. I've also tried putting overflow on some elements but its made no difference.

My code for the navigation is:

<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-collapse">
          <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">
        <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>

I'm new to Responsive Design and have seen many websites with the collapsed menu pushing down the content. Is it good practice to have collapsed menus like this or is it a pure preference thing?

My main question is how can I get the content to be pushed when the collapsed menu is active?

Thank you in advance for the help.

Answer 1

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"> 

Answer 2

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 */
}