ブートストラップ4ナビゲーションバーの遅延

Question

をクリアするには、私はこの開発サイトのためのブートストラップ4アルファ4使用しています：https://dev.shivampaw.com/me

をそして私は明確に追加しました：両方のナビゲーションバーにロゴが上記の行の上に保持されるように。

しかし、あなたがナビゲーションバーを開くと、アイテムが適切に落ちるのに1秒かかるので、これを修正する方法がわかりません。

これはHTMLです：

<header class="site-header"> 
    <nav class="navbar navbar-light bg-faded navbar-fixed-top"> 
     <div class="container">  
      <button type="button" 
       class="navbar-toggler hidden-md-up pull-xs-right" 
       data-toggle="collapse" 
       data-target="#nav-content" 
       aria-expanded="false"> 
       &#9776; 
      </button> 
      <a href="https://www.shivampaw.com" title="Shivam Paw"> 
       <img alt="Shivam Paw Logo" 
        class="navbar-brand" 
        src="https://www.shivampaw.com/images/sp.png"> 
      </a> 

      <div class="collapse navbar-toggleable-sm" id="nav-content"> 
       <ul class="nav navbar-nav pull-md-right"> 
        <li class="active nav-item"> 
         <a href="index.html" 
          title="Shivam Paw Home" 
          class="nav-link"> 
          Home 
         </a> 
        </li> 
        <li class="nav-item"> 
         <a href="about.html" 
          title="About Shivam Paw" 
          class="nav-link"> 
          About Me 
         </a> 
        </li> 
        <li class="nav-item"> 
         <a href="work.html" 
          title="Shivam Paw's Work" 
          class="nav-link"> 
          My Work 
         </a> 
        </li> 
        <li class="nav-item"> 
         <a href="blog.html" 
          title="Shivam Paw's Blog" 
          class="nav-link"> 
          My Blog 
         </a> 
        </li> 
        <li class="nav-item"> 
         <a href="contact.html" 
          title="Contact Shivam Paw" 
          class="nav-link"> 
          Contact Me 
         </a> 
        </li> 
       </ul> 
      </div> 
     </div> 
    </nav> 
</header> 

そして、これはCSSです：

/* Navbar Changes */ 
.navbar-brand { 
    max-width: 55px; 
} 

.navbar-light { 
    background-color: white; 
    border: none; 
    -webkit-box-shadow: 0px 5px 11px 0px rgba(50, 50, 50, 0.08); 
    box-shadow: 0px 5px 11px 0px rgba(50, 50, 50, 0.08); 
} 

.navbar-light .navbar-nav .nav-item .nav-link { 
    text-transform: uppercase; 
    font-size: 14px; 
    font-weight: bold; 
    color: black; 
} 

li.active.nav-item a.nav-link, 
li.active.nav-item a.nav-link:focus, 
li.active.nav-item a.nav-link:hover { 
    color: #337ab7 !important; 
    background-color: inherit; 
} 

@media (max-width: 767px){ 
    ul.navbar-nav{ 
     clear: both; 
    } 
} 

Answer 1

あなたが代わりにメディアクエリ内の＃1のnav-content要素をターゲットにする必要があります

@media (max-width: 767px){ 
    #nav-content{ 
     clear: both; 
    } 
}