如何使导航栏与Bootstrap 3中的内容重叠

Question

I'm using the regular navbar of bootstrap not the fixed-top one, I figured out that when .navbar{position: fixed;} it overlaps, but that's not what I want. I want when I scroll down the menu stays on the top of the page not to move with the page and overlap the content when the menu collapses.

this is my code so far:

<div class="navbar-wrapper">

<div id="menu" class="navbar navbar-right navbar-default nob no-focus" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse ">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <!-- <a class="navbar-brand" href="#">Project name</a> -->
    </div>
    <div class="navbar-collapse collapse ">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </div>
  </div>
</div>

this is what is happening now because is fixed-top

[ http://es.tinypic.com/view.php?pic=fc0i6s&s=8#.U9itaON5Py4]

thanks in advance.

Answer 1

Try this, it will keep the navbar fixed rather than overlap once u start scrolling down.

<div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>

            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">

                        <li class="active"><a href="#">Home</a></li>
                         <li><a href="#about">About</a></li>
                          <li><a href="#contact">Contact</a></li>



                </ul>


            </div>
        </div>
    </div>

Hope this helps :)