Bootstrap Links Not Clickable

please see example: http://bit.ly/1H27G9I I am trying to change the style of the standard bootstrap nav bar so that there are links on the left and right then the logo in the middl

Solution 1:

Get rid of the height: 125px; property on the .headerLogo class. This is causing the div, when at 100% width, to overlap the first menu items.

Solution 2:

You say you don't think it is the z-index. But by looking at your sample. I think it is. Your header logo is positioned absolute and overlapping the links.

Doing something like this should fix it.

.headerlogo {
  z-index:1;
}
.navbar-left {
  position:relative;
  z-index:9;
}

Basically if you are going to lay it out this way, then your nav needs to have a higher z-index than your logo.

Also note that this appears to be different depending on your screen resolution. So its quite possible you are seeing it working at some resolutions, and broken in others.

Screenshot

Solution 3:

You could also apply: z-index:10 in css to the containing div.

Solution 4:

this solves the problem

.navbar-header {
    position:relative;
    z-index: 9001;
}
.navbar-collapse {
    z-index: 9000;
}