CSS overlaying centered text with fixed div, links not working

Question

Attempting to make links work when pressing a fixed div to lower onto another.

The main bar, illustrated in pink holds the links, and when using the usual methods to overlay a div containing the text onto the bar it stops the links from working due to the full width container div holding the text.

I would like to know if there is a possible route to getting the desired result?!

Heres the jsFiddle

The HTML

<div class='text-wrapper'>
    <div class='text_in_middle'>
        some text
    </div>
</div>
<div>
    <div class='bar'>
        &nbsp;
        <a href='' >Link 1</a> -
        <a href='' >Link 2</a> -
        <a href='' >Link 3</a> 

    </div>
</div>

The CSS

 .text_in_middle {
    text-align: center;
}
.bar {
    z-index: 500;
    position: fixed;
    top: 0;
    min-width: 100%;
    background-color: pink;
}
.text-wrapper {
    width: 100%;
    position: fixed;
    top: 0px;
    z-index: 2500;
}

Answer 1

Though it has somewhat limited support, one way to solve this would be to add pointer-events: none to the fixed element. In doing so, you wouldn't have to change any other CSS/HTML.

EXAMPLE HERE

.text-wrapper {
    pointer-events: none;
    width: 100%;
    position: fixed;
    top: 0px;
    z-index: 2500;
}