崩壊メニューをブートストラップ3に配置する方法

Question

折りたたみメニューを配置したかったのですが、私は現在ブートストラップ3を使用しています。私はそれをトップから30pxに配置したかったのです。私は試してみましたが、読み込んだ後、メニューはデフォルト位置に戻ります。ここに私のHTMLは次のとおりです。

<nav class="navbar navbar-default navbar-fixed-top"> 
    <div class="container"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle collapsed data-toggle="collapse" data-target="#navbar-1" aria-expanded="false"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 
     <a href="#" class="navbar-brand">AX<span id="orange">IT</span></a> 
    </div> 
    <div class="collapse navbar-collapse collapse" id="navbar-1"> 
     <ul class="nav navbar-nav navbar-right"> 
      <li><a href="#">Features</a></li> 
      <li><a href="#">About</a></li> 
      <li><a href="#">Pricing</a></li> 
      <li><a href="#">Reviews</a></li> 
      <li><a href="#">Contact</a></li> 
     </ul> 
    </div> 
    </div> 
</nav> 

のCss：ここ

.navbar-default{ 
background-color: black; 
background-image: none; 
} 

.navbar-fixed-top { 
min-height: 80px; 
} 

.navbar-nav > li > a { 
padding-top: 0px; 
padding-bottom: 0px; 
line-height: 80px; 
color: rgba(255, 255, 255, 0.69) !important; 
} 

@media (max-width: 767px) { 
.navbar-nav > li > a, .navbar-brand{ 
    line-height: 20px; 
    padding-top: 10px; 
    padding-bottom: 10px; 
    color: rgba(255, 255, 255, 0.69) !important; 
} 
.navbar-toggle{ 
    top: 15px;  
} 

.navbar-collapse{ 
    top:30px !important; 

} 
} 

.navbar-brand{ 
font-size: 27px; 
font-weight: bold; 
line-height: 80px; 
padding-top: 0px; 
padding-bottom: 0px; 
color: white !important; 
} 

#orange{ 
color: orange; 
font-weight: normal; 
} 

はJSfiddleです：https://jsfiddle.net/amanturate/m8L712kr/

Answer 1

今その作業ありがとうご.navbar-collapse

.navbar-collapse{ 
    top:30px !important; 
    position:relative; 
}