ドリームウィーバーでBootstrapを使ってハンバーガーメニューを組んだのですが、固定ヘッダーのハンバーガーメニューが画像やテキストの下に出てしまいます。position:fixedでz-index:999;にしても効きません。どうすれば良いでしょうか。
###該当のソースコード
```ここに言語を入力 <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:999;
にしても効きません。
困り果てています...よろしくおねがします...
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2017/12/18 02:13 編集