ブートストラップのnavbarがすぐに壊れて消える

Question

モバイル/タブレットのnavbarアイコンをクリックするとnavabrが開きますが、遠ざかりますが、navbarはまだ開いていると思っています。その後（それを閉じることはできません）、それを開くためにもう一度クリックすると、それは同じです。

gif（低解像度で申し訳ありません）を取得して表示します。 GIF

ザ・ナビゲーションバーコード：

<div class="navbar-fixed-top"> 
     <div id="menu"> 
     <div class="menu--topbar"> 
      <div class="container"> 
       <div class="menu-topbar--contact"> 
        <ul class="nav navbar-nav">       
         <li><a style="color:#fff" href="MAILTO:XXXXXXXXXXXXXXXXXXXXX"><i class="fa fa-envelope"></i><span href="mailto:XXXXXXXXXXXXXXXXXXXXX"></span>EMAILXXXXX</a></li> 
         <li><a style="color:#fff" href="tel:XXXXXXXXXX"><i class="fa fa-phone"></i><span href="tel:XXXXXXXXX"></span> XXXXXXXXX</a></li> 
        </ul> 
       </div>     
      </div> 
     </div> 

      <nav id="secondaryMenu" class="navbar-fixed-top"> 
      <div class="container"> 
       <div class="navbar-header"> 
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#secondaryNavbar" aria-expanded="false" aria-controls="secondaryNavbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> 
        <div class="login-btn hidden-lg hidden-md hidden-sm"> <a href="#" class="btn">Nefsani</a> </div> 
       </div> 
       <div id="secondaryNavbar" class="reset-padding navbar-collapse collapse "> 
        <ul class="secondary-menu-links nav navbar-nav"> 
         <li><a href="Default.aspx">Home</a></li> 
         <li><a href="OverMezelf-Opleiding.aspx">Over mezelf</a></li>      
         <li class="dropdown"> <a href="relatietherapie.aspx" data-toggle="dropdown">Mijn aanbod<span class="caret"></span></a> 
          <ul class="dropdown-menu"> 
           <li><a href="relatietherapie.aspx">relatietherapie</a></li> 
           <li><a href="individueletherapie.aspx">individuele therapie </a></li> 
           <li><a href="persoonlijkeconsultgesprekken.aspx">persoonlijke consultgesprekken</a></li> 
          </ul> 
         </li> 
         <li><a href="TariefEnTerugbetaling.aspx">Tarieven en terugbetaling</a></li> 
         <li><a href="contact.aspx">Contacteer mij</a></li>      
        </ul> 
        <ul class="secondary-menu-links nav navbar-nav navbar-right hidden-xs"> 
         <li><a href="Default.aspx" class="btn">Nefsani</a></li> 
        </ul> 
       </div> 
      </div> 
     </nav> 

ナビゲーションバーのCSSは：

#secondaryMenu { 
    position: relative; 
    margin-bottom: 0; 
    background-color: #54bceb; 
    border: none; 
    border-radius: 0; 
    box-shadow: none; 
    z-index: 1; 
} 

    #secondaryMenu.sticky { 
     position: fixed; 
     box-shadow: 0 0 4px rgba(0,0,0,.14),0 4px 8px rgba(0,0,0,.28); 
    } 

    #secondaryMenu .navbar-toggle { 
     border: none; 
    } 

     #secondaryMenu .navbar-toggle .icon-bar { 
      background-color: #fff; 
     } 

    #secondaryMenu a.navbar-brand { 
     display: block; 
     padding: 10px 0; 
     margin-top: 18px; 
     margin-left: 0; 
     color: #303030; 
     font-size: 24px; 
     font-weight: 700; 
    } 

     #secondaryMenu a.navbar-brand span { 
      color: #4584b4; 
     } 

    #secondaryMenu .navbar-header .login-btn > .btn { 
     color: #fff; 
     background-color: #303030; 
     border: none; 
     border-radius: 0; 
     -webkit-transition: color .25s ease,background-color .25s ease-in-out; 
     transition: color .25s ease,background-color .25s ease-in-out; 
    } 

     #secondaryMenu .navbar-header .login-btn > .btn:focus, #secondaryMenu .navbar-header .login-btn > .btn:hover { 
      color: #303030; 
      background-color: #fff; 
      box-shadow: none; 
      outline: 0; 
     } 

.secondary-menu-links li a { 
    margin-right: 3px; 
    padding: 24px 14px 21px; 
    border-bottom: 3px solid transparent; 
    color: #fff; 
    font-size: 18px; 
    line-height: 22px; 
    font-weight: 700; 
    -webkit-transition: color .25s ease,background-color .25s ease-in-out,border-color .25s ease; 
    transition: color .25s ease,background-color .25s ease-in-out,border-color .25s ease; 
} 

.secondary-menu-links li:last-child a { 
    margin-right: 0; 
} 

.secondary-menu-links > .dropdown > a > .caret { 
    margin-left: 8px; 
} 

.secondary-menu-links li a .fa { 
    display: block; 
    margin: 0 auto 3px; 
    font-size: 20px; 
} 

.secondary-menu-links .open > a, .secondary-menu-links .open > a:focus, .secondary-menu-links .open > a:hover, .secondary-menu-links li a:focus, .secondary-menu-links li a:hover, .secondary-menu-links li.active > a, .secondary-menu-links li.active > a:hover { 
    background-color: transparent; 
    border-color: #fff; 
} 

.secondary-menu-links > .dropdown:hover > .dropdown-menu { 
    display: block; 
} 

.secondary-menu-links li .dropdown-menu { 
    padding: 0; 
    background-color: #fff; 
    border-style: solid; 
    border-width: 3px 0; 
    border-color: #fff; 
    border-radius: 0; 
} 

    .secondary-menu-links li .dropdown-menu li a { 
     margin-right: 0; 
     padding: 10px 15px; 
     color: #303030; 
     font-size: 16px; 
     line-height: 20px; 
     border: none; 
    } 

.secondary-menu-links > .dropdown > .dropdown-menu > li.active > a, .secondary-menu-links > .dropdown > .dropdown-menu > li.active > a:focus, .secondary-menu-links > .dropdown > .dropdown-menu > li.active > a:hover, .secondary-menu-links > .dropdown > .dropdown-menu > li > a:focus, .secondary-menu-links > .dropdown > .dropdown-menu > li > a:hover { 
    color: #fff; 
    background-color: #00678d; 
} 

.secondary-menu-links.navbar-right { 
    padding-right: 15px; 
} 

.secondary-menu-links > li > a.btn { 
    padding: 24px 30px; 
    color: #fff; 
    background-color: #303030; 
    border: none; 
    border-radius: 0; 
    -webkit-transition: color .25s ease,background-color .25s ease-in-out; 
    transition: color .25s ease,background-color .25s ease-in-out; 
} 

    .secondary-menu-links > li > a.btn:focus, .secondary-menu-links > li > a.btn:hover { 
     color: #303030; 
     background-color: #fff; 
     box-shadow: none; 
    } 

あなたが任意のより多くのinformatonが必要な場合は私に知らせてください。ありがとうございます。

Answer 1

これらすべてを含めて試してみてください。

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <title>Bootstrap Example</title> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
    <style> 
 
    #secondaryMenu { 
 
    position: relative; 
 
    margin-bottom: 0; 
 
    background-color: #54bceb; 
 
    border: none; 
 
    border-radius: 0; 
 
    box-shadow: none; 
 
    z-index: 1; 
 
} 
 

 
    #secondaryMenu.sticky { 
 
     position: fixed; 
 
     box-shadow: 0 0 4px rgba(0,0,0,.14),0 4px 8px rgba(0,0,0,.28); 
 
    } 
 

 
    #secondaryMenu .navbar-toggle { 
 
     border: none; 
 
    } 
 

 
     #secondaryMenu .navbar-toggle .icon-bar { 
 
      background-color: #fff; 
 
     } 
 

 
    #secondaryMenu a.navbar-brand { 
 
     display: block; 
 
     padding: 10px 0; 
 
     margin-top: 18px; 
 
     margin-left: 0; 
 
     color: #303030; 
 
     font-size: 24px; 
 
     font-weight: 700; 
 
    } 
 

 
     #secondaryMenu a.navbar-brand span { 
 
      color: #4584b4; 
 
     } 
 

 
    #secondaryMenu .navbar-header .login-btn > .btn { 
 
     color: #fff; 
 
     background-color: #303030; 
 
     border: none; 
 
     border-radius: 0; 
 
     -webkit-transition: color .25s ease,background-color .25s ease-in-out; 
 
     transition: color .25s ease,background-color .25s ease-in-out; 
 
    } 
 

 
     #secondaryMenu .navbar-header .login-btn > .btn:focus, #secondaryMenu .navbar-header .login-btn > .btn:hover { 
 
      color: #303030; 
 
      background-color: #fff; 
 
      box-shadow: none; 
 
      outline: 0; 
 
     } 
 

 
.secondary-menu-links li a { 
 
    margin-right: 3px; 
 
    padding: 24px 14px 21px; 
 
    border-bottom: 3px solid transparent; 
 
    color: #fff; 
 
    font-size: 18px; 
 
    line-height: 22px; 
 
    font-weight: 700; 
 
    -webkit-transition: color .25s ease,background-color .25s ease-in-out,border-color .25s ease; 
 
    transition: color .25s ease,background-color .25s ease-in-out,border-color .25s ease; 
 
} 
 

 
.secondary-menu-links li:last-child a { 
 
    margin-right: 0; 
 
} 
 

 
.secondary-menu-links > .dropdown > a > .caret { 
 
    margin-left: 8px; 
 
} 
 

 
.secondary-menu-links li a .fa { 
 
    display: block; 
 
    margin: 0 auto 3px; 
 
    font-size: 20px; 
 
} 
 

 
.secondary-menu-links .open > a, .secondary-menu-links .open > a:focus, .secondary-menu-links .open > a:hover, .secondary-menu-links li a:focus, .secondary-menu-links li a:hover, .secondary-menu-links li.active > a, .secondary-menu-links li.active > a:hover { 
 
    background-color: transparent; 
 
    border-color: #fff; 
 
} 
 

 
.secondary-menu-links > .dropdown:hover > .dropdown-menu { 
 
    display: block; 
 
} 
 

 
.secondary-menu-links li .dropdown-menu { 
 
    padding: 0; 
 
    background-color: #fff; 
 
    border-style: solid; 
 
    border-width: 3px 0; 
 
    border-color: #fff; 
 
    border-radius: 0; 
 
} 
 

 
    .secondary-menu-links li .dropdown-menu li a { 
 
     margin-right: 0; 
 
     padding: 10px 15px; 
 
     color: #303030; 
 
     font-size: 16px; 
 
     line-height: 20px; 
 
     border: none; 
 
    } 
 

 
.secondary-menu-links > .dropdown > .dropdown-menu > li.active > a, .secondary-menu-links > .dropdown > .dropdown-menu > li.active > a:focus, .secondary-menu-links > .dropdown > .dropdown-menu > li.active > a:hover, .secondary-menu-links > .dropdown > .dropdown-menu > li > a:focus, .secondary-menu-links > .dropdown > .dropdown-menu > li > a:hover { 
 
    color: #fff; 
 
    background-color: #00678d; 
 
} 
 

 
.secondary-menu-links.navbar-right { 
 
    padding-right: 15px; 
 
} 
 

 
.secondary-menu-links > li > a.btn { 
 
    padding: 24px 30px; 
 
    color: #fff; 
 
    background-color: #303030; 
 
    border: none; 
 
    border-radius: 0; 
 
    -webkit-transition: color .25s ease,background-color .25s ease-in-out; 
 
    transition: color .25s ease,background-color .25s ease-in-out; 
 
} 
 

 
    .secondary-menu-links > li > a.btn:focus, .secondary-menu-links > li > a.btn:hover { 
 
     color: #303030; 
 
     background-color: #fff; 
 
     box-shadow: none; 
 
    } 
 
    </style> 
 
    
 
</head> 
 
<body> 
 

 
<div class="navbar-fixed-top"> 
 
     <div id="menu"> 
 
     <div class="menu--topbar"> 
 
      <div class="container"> 
 
       <div class="menu-topbar--contact"> 
 
        <ul class="nav navbar-nav">       
 
         <li><a style="color:#fff" href="MAILTO:XXXXXXXXXXXXXXXXXXXXX"><i class="fa fa-envelope"></i><span href="mailto:XXXXXXXXXXXXXXXXXXXXX"></span>EMAILXXXXX</a></li> 
 
         <li><a style="color:#fff" href="tel:XXXXXXXXXX"><i class="fa fa-phone"></i><span href="tel:XXXXXXXXX"></span> XXXXXXXXX</a></li> 
 
        </ul> 
 
       </div>     
 
      </div> 
 
     </div> 
 

 
      <nav id="secondaryMenu" class="navbar-fixed-top"> 
 
      <div class="container"> 
 
       <div class="navbar-header"> 
 
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#secondaryNavbar" aria-expanded="false" aria-controls="secondaryNavbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> 
 
        <div class="login-btn hidden-lg hidden-md hidden-sm"> <a href="#" class="btn">Nefsani</a> </div> 
 
       </div> 
 
       <div id="secondaryNavbar" class="reset-padding navbar-collapse collapse "> 
 
        <ul class="secondary-menu-links nav navbar-nav"> 
 
         <li><a href="Default.aspx">Home</a></li> 
 
         <li><a href="OverMezelf-Opleiding.aspx">Over mezelf</a></li>      
 
         <li class="dropdown"> <a href="relatietherapie.aspx" data-toggle="dropdown">Mijn aanbod<span class="caret"></span></a> 
 
          <ul class="dropdown-menu"> 
 
           <li><a href="relatietherapie.aspx">relatietherapie</a></li> 
 
           <li><a href="individueletherapie.aspx">individuele therapie </a></li> 
 
           <li><a href="persoonlijkeconsultgesprekken.aspx">persoonlijke consultgesprekken</a></li> 
 
          </ul> 
 
         </li> 
 
         <li><a href="TariefEnTerugbetaling.aspx">Tarieven en terugbetaling</a></li> 
 
         <li><a href="contact.aspx">Contacteer mij</a></li>      
 
        </ul> 
 
        <ul class="secondary-menu-links nav navbar-nav navbar-right hidden-xs"> 
 
         <li><a href="Default.aspx" class="btn">Nefsani</a></li> 
 
        </ul> 
 
       </div> 
 
      </div> 
 
     </nav> 
 
    
 
<div class="container"> 
 
    <h3>Collapsible Navbar</h3> 
 
    <p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window). 
 
    <p>Only when the button is clicked, the navigation bar will be displayed.</p> 
 
</div> 
 

 
</body> 
 
</html>