ハンバーガーメニューがz-indexで指定できません

Question

ドリームウィーバーでBootstrapを使ってハンバーガーメニューを組んだのですが、固定ヘッダーのハンバーガーメニューが画像やテキストの下に出てしまいます。position：fixedでz-index：９９９；にしても効きません。どうすれば良いでしょうか。

###該当のソースコード

```ここに言語を入力

<div class="visible-xs"> 
    <!--ハンバーガーメニュー--> 
     <div class="sm-nav visible-xs-block sm-g-nav-waku header-nav"> 
    <nav class="navbar navbar-fixed-top"> 
      <div class="navbar-header"> 
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#sm-gnavi"> <span class="sr-only"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> 
        <!--左ロゴ-->  
        <a href="#"><img src="images/toplogo.png"></a> 
        <!--左上のロゴ部分-->  
        <!--//左ロゴ-->  
      </div> 
      <div id="sm-gnavi" class="collapse navbar-collapse"> 
        <ul class="nav navbar-nav sm-nav"> 
   <li class="line nav1"> <a href="./">トップページ</a> </li> 
          <li class="dropdown line nav2"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">メニュー</a> 
            <ul class="dropdown-menu"> 
              <li> <a href="#">メニューメニュー</a> </li> 
              <li> <a href="#">メニューメニュー</a> </li> 
            </ul> 
          </li> 
   <li class="line nav2"><a href="#">システム</a></li> 
   <li class="dropdown line nav2"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">システム</a> 
            <ul class="dropdown-menu"> 
              <li> <a href="#">メニューメニュー</a> </li> 
              <li> <a href="#">メニューメニュー</a> </li> 
            </ul> 
          </li> 
   <li class="dropdown line nav2"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">案内</a> 
            <ul class="dropdown-menu"> 
    <li> <a href="#">メニューメニュー</a> </li> 
              <li> <a href="#">メニューメニュー</a> </li> 
            </ul> 
          </li> 
          <li> <a href="">メニュー</a> </li> 
        </ul> 
      </div> 
    </nav> 
   </div>  
     <!--ハンバーガーメニュー終わりー--> 
    </div>

###該当のソースコードcss
/スマホなび/

.visible-xs-block { 
 min-width: 500px; 
 width: 100%;  
} 

.sm-nav nav.navbar{ 
 background-color: #42c4c4; 
} 

.dropdown { 
 border-bottom:1px solid #fff; 
} 

.visible-xs-block img { 
 width: 60%; 
 height: auto; 
 float: left; 
 margin-top: 15px; 
 margin-left: 15px; 
 margin-bottom: 20px; 
} 

.sm-g-nav-waku ul li{ 
 width:100%; 
} 

.sm-nav { 
width: 100%; 
text-align: center; 
} 
.sm-nav .navbar-toggle { 
margin-right: 15px; 
 margin-top:15px; 
 border-color:#fff; 
} 
span.icon-bar{ 
 background-color:#fff; 
} 
.sm-nav .navbar-nav{ 
 margin:0; 
} 
.sm-nav .navbar-nav a{ 
 color:white; 
} 
.navbar-nav span { 
 border-bottom:1px solid #fff; 
} 

.nav1 { 
 border-bottom:1px solid #fff; 
 border-top:1px solid #fff; 
} 

.nav2 { 
 border-bottom:1px solid #fff; 
} 

.sm-nav .navbar-nav .open { 
 border-bottom:1px solid #fff; 
} 
.sm-nav .navbar-nav .open .dropdown-menu li a{ 
 color:#fff; 
} 
.sm-nav .navbar-nav .open .dropdown-menu li a:before{ 
font-family:"fontawesome"; 
content:"\f0da"; 
margin-right: 10px; 
} 
.sm-nav .navbar-brand { 
background-image:url(../image/sm-logo.png); 
background-repeat: no-repeat; 
background-size: contain; 
height: 60px; 
width: 140px; 
margin-left: 15px; 
margin-bottom: 5px; 
margin-top: 5px; 
} 
.sm-nav .navbar-collapse { 
padding: 0; 
margin:0; 
} 
.sm-main{ 
margin-top:60px; 
background-image:url(../image/main-back.jpg); 
}

コード

###試したこと

position：fixed；
z-index：９９９；

にしても効きません。
困り果てています...よろしくおねがします...

Answer 1

上記のコードをコピーしてbootstrapを読み込んで試したところ文字の上にヘッダーのメニューがきていました。
「画像やテキストの下に出てしまいます」に該当するコードの位置がよくなかったのではないでしょうか。

<!--ハンバーガーメニュー終わりー-->   
</div>
<p>こんばんは</p>
<p>こんばんは</p>
<p>こんばんは</p>
<p>こんばんは</p>
<p>こんばんは</p>

みたいに書いたところ１つ目の「こんばんは」はヘッダのメニューの下に隠れ、それから下はそのまま表示されました。
バーガーメニューを開くとすべてメニューの下の隠れました。

ちなみにbootstrap.min.css内では

.navbar-fixed-top{
    position: fixed;
    right: 0;
    left: 0;
    z-index: 1030;
}

となっていました。

Comments

[退会済みユーザー]

ありがとうございます。他の部分で指定されていたものが優先されていたみたいです。見つかりました！