Disparition du champ de recherche sur petit format

Bonjour,
Je travaille avec Bootstrap et Typo3.
J’aimerai vous demander une piste de recherche, de réflexion concernant un problème que j’ai dans l’interface responsive sur laquelle je travaille actuellement.
En grand écran, j'ai un champ de recherche visible (image 01).
Quand je suis dans une configuration pour les petits écrans le champ de recherche se transforme en bouton sur lequel l’utilisateur « clique » pour faire apparaitre le champ de recherche (image 02).
Une fois que j’appuie (clique) sur le bouton de recherche, le champ de recherche apparait (image 03) et ensuite quand j’appuie une seconde fois dans le champ de recherche pour introduire un mot, tout s’efface (bouton et champ) (image 04) !

Merci d’avance pour votre réponse,
Voici mon template en html et ma css responsive

<!-------------------------/PARTIE HAUT, logo, menu et recherche------------------------->

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
      <div class="container-fluid">
       
     <!--###searchbox### start-->
   <form class="navbar-form navbar-right" role="search" id="recherche">

     test
       <div class="form-group">
         <form action="" method="post" name="form1" id="form1">
                 <input type="text" class="form-control" placeholder="rechercher">
         </form>
        </div><!--form-group -->

    </form>
        <!--###searchbox### end-->

<!--navbar_niveau2 - partie qui disparait sur les petits ecrans-->
   <div class="navbar_niveau2">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#barre_navigation">
             <span class="sr-only">Basculer la navigation</span>
             <p>Menu</p>
          </button>
<!--bouton recherche responsive -->
   <span class="visible-xs">

        <div class="btn-group pull-right" type="submit">
             <a class="btn" data-toggle="dropdown" href="#" id="loupe"> <i class="glyphicon glyphicon-search"></i></a>
                <ul class="dropdown-menu" id="recherche2">
                     <li>
                       <a href="#">
                       <form class="form-inline">
                           <input class="form-control" placeholder="Rechercher" type="text">
                        </form>
                         </a>
                      </li>
                </ul><!--dropdown-menu-->
         </div><!--btn-group pull-right-->
  
   </span><!--visible-xs-->

<!--/bouton barre de navigation responsive-->             
    <div class="collapse navbar-collapse" id="barre_navigation">
      <!--###barre_navigation### start -->
          par défaut template
          <ul class="nav navbar-nav pull-right">
              <li><a href="?id=9942"><img src="fileadmin/typo3template/images/icone_gerer.png" name="gerer" width="30" height="30" id="gerer" title="vers le menu gérer" />&nbsp;<span class="visible-xs visible-petit">Gérer</span></a></li>
            ...
          </ul>
       <!--###barre_navigation### end -->

       </div><!--/.nav-collapse navbar-collapse -->
   </div><!--navbar_niveau2 -->  
 </div><!--container-fluid -->  
</nav><!--/navbar navbar-default -->

@charset "utf-8";
/* CSS Document */

/* Large desktop */
@media (min-width: 1200px) {


.navbar {
    background-color: #DFDFD0;
}

. navbar.navbar-default {
    background-color: #DFDFD0 !important;
    border-color: #e7e7e7;
}

.navbar-header {
    width: 100%;
}

.navbar-header a img {
  margin: 20px 10px 0px 5px;
}

.navbar-header a #logo div {
  width: 75%;
  float: right;
}


/* menu principal */
.navbar-nav > li > a {
   width: 70%;
   margin-top: 0;
   padding-top: 3px;
   padding-bottom: 3px;
   margin-left: 0px;
}

.navbar-form {
   float: right;
   margin-top: 10px;
   margin-right: 5px;
   margin-bottom: 4px;
   position: relative;
}

.navbar_niveau2 {
   margin-top: 45px;
   margin-right: 0px;
}
...
}/* Large desktop */

/* Portrait tablet to landscape and desktop */
    @media (min-width: 768px) and (max-width: 979px) {

 #contenu02 {
    margin-left: 10em;
  }

}

@media (max-width: 766px) {
 /*margin top: 60px;*/


a .glyphicon-search {
    color: #FFF;
  }


body {
    padding-top: 30px;
}
  
  .navbar-collapse {
    margin-top: 5%;
    margin-left: 0%;
    margin-right: 0%;
    padding: 0%;
    width: 70%;
    margin-left: auto;
    margin-right: auto;
    border-radius: 10px;
  }
  
  .collapse navbar-collapse li img {
     float: right;
     margin-right:0%;
  }
  
  .nav {
    height:  100%;
  }
  
  .navbar-nav {
    width: 100%;
    margin-top: 5px;
    margin-left:0;
    margin-right:0;
    padding-top: 3px;
    padding-bottom: 3px;
    float: left !important;
  }
  
  #barre_navigation {
    margin-left: 0%;
    width: 90%;
}  

/* padding gauche menu deroulant navigation */  
  .navbar-nav > li {
    margin-left: 10%;
}  
  
  .logo {
    width: 5%;  
  }
  
  .logo a {
    display: box;  
  }
  

.btn-group pull-right{
  display: block;
}

  #contenu02 {
    width: 100%;
    margin-left: 0;
  }
  
  .navbar-form {
    display: none;
  }
/* bouton menu deroulant navigation */    
  .navbar-toggle {
    float: right;
    margin-right: 20px;
    margin-top: -30px;
    height: 35px;
    background-color:#C9C9AF;
    border-color:#FFF;
  }
  
/* bouton recherche */  
  #loupe {
    margin-top: -30px;
    margin-right: 3px;
    padding:6px;
    background-color:#C9C9AF;
    float: right;
    width: 100%;
    border-radius: 4px;
    border-color:#FFF;
  }
  
}

  #loupe2 {
    background-color:#C9C9AF;
    color: #FFF;
    border-color: #fff;
    margin-left: 2px;
  }
  

@media (max-width: 768px) {
  

  #recherche2 a {
    padding-left: 10px;
    padding-right: 10px;
  }

  a .glyphicon-search {
    color: #FFF;
  }
  
  a .glyphicon-search:hover {
      color: #535337;
}

}

@media (max-width: 600px) {

  .navbar-toggle {
    margin-top: -30px;
  }
 
}