Bootstrap fixed menu hiding content

Question

I am using bootstrap fixed menu in my web page, but the menu bar is hiding some of the content of the page, especially when the screen size is decreased, then the responsive menu will hide more content.

example of the code:

 <nav class="navbar navbar-inverse navbar-fixed-top" style ="background:#141414"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand navbar-left" href="#" style="font-family:'Adobe Arabic';font-size:xx-large; font-weight:bold;"><?php echo $strMnuBrand; ?> </a> </div> <ul class="nav navbar-nav navbar-left"> <li class="active" ><a href="#" style="background:#ff6600; color:#e7e7e7; font-weight:bold;"><?php echo $strMnuHome ?></a></li> <li><a href="#" style="color:#e7e7e7;"><?php echo $strMnuPage1 ?></a></li> <li><a href="#" style="color:#e7e7e7;"><?php echo $strMnuPage2 ?></a></li> </ul> 

...etc. What I should do so the fixed menu do not hide the page content, and the page stay responsive?

note: I searched SO for solution but no one worked for me!

Answer 1

You need to add top padding equal to the height of your navbar + a bit for padding to your body, if you're using top-fixed navbar. Like so:

body {
  padding-top: 70px;
}

Make sure to include this after the core Bootstrap CSS.

Answer 2

The below code will not hide any of the menu items when the screen size is reduced and will also be responsive and will show the menu items at all screen sizes.

You can see it in action here

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">

      <a class="navbar-brand" href="#">Brand Name</a>
    </div>
    <div class="" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Page 1-1</a></li>
            <li><a href="#">Page 1-2</a></li>
            <li><a href="#">Page 1-3</a></li>
          </ul>
        </li>
        <li><a href="#">Page 2</a></li>
        <li><a href="#">Page 3</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
        <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
      </ul>
    </div>
  </div>
</nav>