twitter bootstrap carousel, overlay div on top of carousel but keep navigation working

Question

I tried for too long to overlay content on top of the twitter bootstrap.

Just overlay a div on top of the carousel without preventing the carousel navigation to be no longer clickable + prevent the slides ( im using images 300 height ) to overlay the div's content. ( the div is a navigation menu )

Tried so far many times and made a jsfiddle:

.outer {
    position: relative;
}
.ontop {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right:0;
    z-index: 99999;
}

#wrapper_slider{
    height: 360px;
    background-color: red;
    border: solid red 10px;
}


#bar{
    height: 40px;
    background-color: green;

}   

http://jsfiddle.net/bM32G/5/

Who knows how to correctly approach this problem?

Answer 1

using css pointer-events:none; should do the trick.

On IE 10 it works but not as well as on chrome/firefox/safari you have to be like right on the links to see that they are clickable. Did not have IE 11 to test it on.

So there may still be an issue on older versions of internet explorer.. But this seems to be viable solution for up to date browsers.

.ontop {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right:0;
    z-index: 99999;
    pointer-events:none;
}

http://jsfiddle.net/trevordowdle/bM32G/6/

Here is a question you may find useful:

Click through a DIV to underlying elements

In this situation there is a work around provided for IE, I don't know that it applies to you in this situation though. But you could get some ideas.