Bootstrap Dropdown-Menüelemente, die auf einigen Seiten nicht anklickbar sind

Question

Ich habe ein Bootstrap-Dropdown-Problem, bei dem meine Homepage beim Klicken auf das Menü korrekt angezeigt wird, es mir jedoch nicht erlaubt, auf ein verknüpftes Element im Menü zu klicken.

Der seltsame Teil ist, dass es bis zu einer letzten Änderung an einer statischen nicht verwandten Seite funktionierte, die es in keiner sichtbaren Weise beeinträchtigen sollte.

Es scheint, als ob das Bootstrap-Grid-System irgendwie über dem Dropdown-Link auf den Seiten ist, auf denen das Dropdown-Menü nicht funktioniert.

Für einen Blick auf die Website: https://eastcape.herokuapp.com/ Setzen Sie es auf Heroku, damit Sie es besser sehen können. Die Nav-Leiste auf der Startseite und der Forenindex sind zwei Beispiele, wo es nicht funktioniert.

Auf jedem bestimmten Forum Post oder der Nachrichtenseite sind Beispiele, wo es sich entscheidet zu arbeiten.

Durch die Art und Weise Schienen Noob hier: P

Was ich denke, der entsprechende Code ist:

Header-Layout:

<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: (noch ein wenig blättern)

/* 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

Es ist ein z-Index Problem im Header-Bereich. Machen Sie einfach die Kopfzeile z-index: 1;. Es wird gut funktionieren.

CSS:

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