Twitter Bootstrapのcollapse時の挙動について質問です。モバイルでcollapseした際、headerより下部200pxほどが一切反応しなくなります。具体的にはコンテンツ上部の検索結果のリンクや検索ボックスが一切反応しません。画面上での表示・レイアウトには問題ありません。collapse時に、<div class="container-fluid" id="navfluid">内に表示される<div class="collapse navbar-collapse" id="navigationbar">が、headerより下にズレてしまい、表示されているコンテンツの上に被さってしまっているようです。丸一日ほどコードを調べていたのですが、どうしても解決できないので質問させていただきました。
以下のコードからは、余計な要素は省略してあります。bootstrapのcssを過去に改変したので、それが原因なのでしょうか?どうぞよろしくお願いいたします。
<nav class="navbar navbar-default" role="navigation" style="z-index:1;">
<div class="container-fluid" id="navfluid">
<div class="navbar-header">
<a href="/"><div class="navbar-brand navbar-siteTitle"></div></a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navigationbar">
<span class="sr-only">menu</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="navigationbar">
<ul class="nav navbar-nav navbar-right">
<li class="visible-xs">home</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
みんなの回答 2 件
z-indexとかで何か上に乗っかってたりしない?
本日も、格闘していますが、引き続き、まったく分からず、、、どなたか分かりませんでしょうか。
関連するトピックス