I'm having trouble getting Bootstrap mobile collapse to work

Question

I'm new to bootstrap and working with navbar. I'd like logos in left, right middle. I've tried the below code but it does not work, any suggestions?

    <nav class="navbar navbar-inverse navbar-static-top">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>    
        </div>
        <a class="navbar-brand" href="#">Brand</a>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav navbar-left">
              <li><a href="#">Left</a></li>
              <li><a href="#about">Left</a></li>
          </ul>
          <ul class="nav navbar-nav navbar-right">
            <li><a href="#about">Right</a></li>
            <li><a href="#contact">Right</a></li>
          </ul>
        </div>
   </nav>

score 1 · Accepted Answer · answered Nov 05 '15 at 20:06

I recreated a navbar for you to use with brand logo in the center.

<nav class="navbar navbar-default" role="navigation">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>

    </div>
    <a class="navbar-brand" href="#">Brand</a>
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="navbar-collapse-1">

      <ul class="nav navbar-nav navbar-left">
        <li><a href="#">Menu</a></li>
        <li><a href="#">Menu</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
      </ul>
    </div><!-- /.navbar-collapse -->
</nav>

CSS:

.navbar-brand
{
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    text-align: center;
    margin: auto;
}

CODEPEN DEMO

still not expanded. but if i remove position : absolute; line. its work. i have no idea. — maddoge23, Nov 05 '15 at 20:18
its seems the navbar toogle is overlaping with navbar brand, here the code .navbar-toggle{ z-index: 10; } — maddoge23, Nov 05 '15 at 20:22

I'm having trouble getting Bootstrap mobile collapse to work

1 Answers1