Within the layout, there are two primary components: the 'header image' and the 'navbar'. The image is set to overlap the navbar partially by adjusting the margin.
In its default state, this configuration functions properly due to an undisclosed technique. Despite the image overlapping the navbar, the links within the navbar remain functional in areas where the image is transparent.
However, when the navbar becomes fixed (using position:fixed after scrolling, via the affix plugin), this workaround ceases to be effective and the navbar ends up covering the image. The HTML code is as follows:
<div class="container brand-img-container">
<img class="brand-img" alt="" src="IMAGEWHICH OVERLAPS PARTIALLY" />
</div>
<div id="nav-wrapper" class="container">
<div class="row">
<div id="nav" class="navbar navbar-static span4">
<div class="navbar-inner">
<ul class="nav pull-left">
<li><a href="anypage">Button</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="container">
<h2> R <h2>
</div>
The CSS code is as follows:
#nav.affix {
position: fixed;
top: 0;
}
.brand-img-container {
position: relative;
margin-bottom: -80px;
}
You can view an example with a base64-encoded picture here: http://jsfiddle.net/5qYK8/9/
When attempting to adjust the z-index, the image completely covers the navbar, even in the default scenario, rendering the links non-operational. You can view this behavior in the following link: http://jsfiddle.net/5qYK8/8/
Is there a way to allow the image (specifically the red cross) to overlap the navbar in both fixed and unfixed scenarios while keeping the Button functional? Can anyone provide insight into why the Button works in the first case despite being overlapped by the image?