ekr990011 ekr990011 - 2 months ago 9
CSS Question

Bootstrap Dropdown menu items non-clickable on some pages

I have a bootstrap dropdown issue where on say my homepage when I click the menu correctly comes down but it does not allow me to click a linked item in the menu.

The weird part is that it was working until a recent change to a static non-related page that should not affect it in any seeable way.

It appears like the bootstrap grid system somehow is above the dropdown link on the pages where the dropdown menu does not work.

For a look at the site: https://eastcape.herokuapp.com/
Put it on heroku so you guys can see it better. The nav-bar on the homepage and forum index are two examples where it does not work.

On any particular forum post or the news page are examples where it decides to work.

By the way rails noob here :P

What I think the relevant code is:

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: (need to scroll a little)

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

It is a z-index issue in header section. Just make the header z-index: 1;. It will work fine.

CSS:

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