ブートストラップドロップダウンメニュー項目は一部のページではクリックできません

Question

ブートストラップのドロップダウンに関する問題があります。メニューを正しくクリックすると私のホームページが表示されますが、メニューのリンクされた項目をクリックすることはできません。

奇妙な部分は、見た目には影響を与えない静的で非関連のページへの最近の変更まで機能していたことです。

ブートストラップグリッドシステムのように、どういうわけかドロップダウンメニューが動作しないページのドロップダウンリンクの上に表示されます。

サイトをご覧ください：https://eastcape.herokuapp.com/ あなたはあなたがそれをよく見ることができるように英雄に入れてください。ホームページとフォーラムのインデックスのnav-barは、うまくいかない2つの例です。

特定のフォーラム投稿またはニュースページでは、動作することを決めた例です。

のヘッダーレイアウト：私は、関連するコードがあると思い何P

：

<header class="col-xs-12 col-sm-12 col-md-12 header"> 
    <div class="headernav"> 
    <% # img/nav bar/ weather icon, here %> 
    <nav> 
     <ul class="nav nav-tabs" id="navlist"> 
     <li><%= link_to "Home", root_path %></li> 
     <li><%= link_to "News", news_path %></li> 
     <li><%= link_to "Forum", forums_path %></li> 
     <li><%= link_to "About", about_path %></li> 
     <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" %>Activities<b class="caret"></b></a> 
      <ul class="dropdown-menu"> 
      <li><%= link_to "Fishing", fishing_path %></li> 
      <li></li> 
      </ul> 
     </li> 
     </ul> 
    </nav> 
    <div class="col-xs-12 div-tp"></div> 
    </div> 
    <%= image_tag(('water4.jpg'), class: "header_image") %> 
</header> 

CSS：（少しスクロールする必要があります）

レールはここのnoobところで

/* Header */ 
.header { 
    height: 15%; 
    z-index: 0; 
} 

.header_image { 
    position: absolute; 
    top: 0%; 
    left: 0%; 
    height: 100%; 
    width: 100%; 
} 

.headernav { 
    position: absolute; 
    float: right; 
    bottom: 0%; 
    right: 0%; 
} 

.nav > li > a { 
    font-size: 125%; 
     color: #ff6600; 
     text-shadow: .06em .06em #660000; 
     z-index: 2; 
} 

.nav > li > a:hover { 
    background-color: #ffeecc; 
    color: red; 
    z-index: 2; 
    border-radius: 3em; 
} 

.div-tp { 
    position: absolute; 
    background-color: #e6e6e6; 
    height: 100%; 
    opacity: 0.5; 
    z-index: 1; 
    border-radius: 3em; 
    bottom: 0%; 
    right: 0%; 
} 

Answer 1

ヘッダーセクションにz-index問題です。ヘッダーをz-index: 1;にしてください。それは正常に動作します。

CSS：

.header { 
    height: 15%; 
    z-index: 1; 
}