two navbars opening at the same time, bootstrap 3

[rajatchak]

Hello. I am working on bootstrap 3 and here is the problem i am facing below:

1. This is the problem i am facing : http://oi44.tinypic.com/14b5ob8.jpg

• When i click on the top navbar, the bottom navbar opens up too and vice versa/

• I assume that i need to use different classes so that the class selectors are unique but since i am new to bootstrap 3 could somone possibly tell me which class and where i can use in my code below to fix my problem ? I tried using navbar-responsive and subnav-collapse already .... :/
  i am not familiar with the bootstrap 3 environment ... please can someone guide me with this?

• It would help me loads! Thanks and god bless :)

<code>

<header role="banner">
     <nav id="navbar1" class="navbar" role="navigation">
   <div class = "navbar navbar-inverse navbar-fixed-top">
           <div class = "container">



              <div class="col-sm-3 col-md-3 pull-right">
                <form class="navbar-form" role="search">
                   <div class="input-group">

                   <input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">

                   <div class="input-group-btn">
                   <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
                   </div>

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


                  <a href = "#" class = "navbar-brand glyphicon glyphicon-fire">igniteourminds.com</a>

                  <button class = "navbar-toggle " data-toggle = "collapse" data-target = ".navHeaderCollapse">
                      <span class = "icon-bar"></span>
                      <span class = "icon-bar"></span>
                      <span class = "icon-bar"></span>
                  </button>

                   <div class = "collapse navbar-collapse navHeaderCollapse">


                      <ul class = "nav nav-tabs navbar-nav navbar-right">


                         <li><a href = "#">About </a></li> 
                         <li><a href = "#">Contact</a></li>
                         <li><a href = "#contact" data-toggle="modal">Advertise</a></li>

                      </ul>

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


             <div class="raj jumbotron">


             <img class="img-responsive img-rounded" src="C:\Users\Rajat\Desktop\NEW WEB\BOOTSTRAP\dist\23.jpg" alt="Ignited Minds"> 


             </div>





</header>


        <nav id="navbar2" class="navbar" role="navigation">
    <div class = "navbar navbar-inverse navbar-static-top">
         <div class = "container">



            <div class=" col-md-3 pull-right navbar-form ">

                 <form name="newsletter" action="#" method="post" >


                       <input type="email" name="email" class="form-control" placeholder="Your email"  >


                       <div class="subscribe">
                          <button type="button" class="btn btn-danger" >Subscribe</button>
                       </div>

                 </form>

            </div>


                      <button class = "navbar-toggle " data-toggle = "collapse" data-target = ".navHeaderCollapse">

                            <span class = "icon-bar"></span>
                            <span class = "icon-bar"></span>
                            <span class = "icon-bar"></span>


                      </button>






                <div class = "collapse navbar-collapse navHeaderCollapse">

                                    <ul class = "nav nav-justified nav-tabs navbar-nav navbar-right">

                                            <li class = "active "><a href = "#">Home</a></li>
                                            <li><a href = "#">Exclusive</a></li>
                                            <li><a href = "#">Knowledge</a></li>
                                            <li><a href = "#">Ponder</a></li>
                                            <li><a href = "#">Facts</a></li>
                                            <li><a href = "#">Life</a></li>

                       <li class = "dropdown">

                            <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">Inventions/Discoveries <b class = "caret"></b></a>

                            <ul class = "dropdown-menu">

                                <li><a href = "#">Science</a></li>
                                <li><a href = "#">Technology</a></li>

                            </ul>

                       </li>


                                    </ul>

                </div>

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

</code>