CODEWITHSUNDEEP
jquerytwitter-bootstraptwitter-bootstrap-3
Miomir Dancevic
Miomir Dancevic

Reputation: 6852

Adding different collapse menu in bootstrap 3

I am using two or more diferent menu, the problem i have is that, second collapse open together with down toggle??

Here is HTML

<footer>
    <nav class="navbar navbar-default navbar-fixed-bottom">
      <div class="navbar-header"> 
      <a class="navbar-brand" href="#" data-toggle="collapse" data-target=".navbar-collapse-second">Brand</a>
        <button type="button" class="navbar-toggle overlay-display" 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">
        <p class="navbar-text"> <a href="#" class="navbar-link">Username</a> </p>
      </div>
       <div class="navbar-collapse-second collapse">
        <p class="navbar-text"> <a href="#" class="navbar-link">Username</a> </p>
      </div>
      <div class="container-fluid" style="background-color:red;">
        <div class="row">
          <div class="col-md-12"> COPYRIGHT </div>
        </div>
      </div>
    </nav>
  </footer>

And here is CSS

            footer > nav > div.navbar-header {
    float: none;
}
footer > nav > div.navbar-header > button {
    display: block;
}
footer > nav > div.navbar-collapse {
    border-top: 1px solid transparent;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
footer > nav > div.navbar-collapse.collapse {
    display: none!important;
}
footer > nav > div.navbar-nav {
    float: none!important;
    margin: 7.5px -15px;
}
footer > nav > div.navbar-nav>li {
    float: none;
}
footer > nav > div..navbar-nav>li>a {
 padding-top: 10px;
 padding-bottom: 10px;
}

Is i possible to add several button on collapse??

Here is working fiddle http://jsfiddle.net/h2scz3q5/

Try to click on bootom navigation, top navigation opens with bootom, and when try to click on brand in bootom, something strane is happening, first collapse at bootom is not closing?

Upvotes: 1

Views: 1323

Answers (1)

Suganth G
Suganth G

Reputation: 5156

Give the Unique target

In button

<button type="button" class="navbar-toggle overlay-display" data-toggle="collapse" data-target=".navbar-collapse1"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>

Target div

 <div class="navbar-collapse1 collapse">

HTML:

<footer>
    <nav class="navbar navbar-default navbar-fixed-bottom">
      <div class="navbar-header"> 
      <a class="navbar-brand" href="#" data-toggle="collapse" data-target=".navbar-collapse-second">Brand</a>
        <button type="button" class="navbar-toggle overlay-display" data-toggle="collapse" data-target=".navbar-collapse1"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
      </div>
      <div class="navbar-collapse1 collapse">
        <p class="navbar-text"> <a href="#" class="navbar-link">Username</a> </p>
      </div>
       <div class="navbar-collapse-second collapse">
        <p class="navbar-text"> <a href="#" class="navbar-link">Username</a> </p>
      </div>
      <div class="container-fluid" style="background-color:red;">
        <div class="row">
          <div class="col-md-12"> COPYRIGHT </div>
        </div>
      </div>
    </nav>
  </footer>

DEMO

Upvotes: 3

Related Questions