After applying a high z-index to the header, it appears beautifully, but unfortunately, none of the links in other divs are clickable. I seem to be missing something obvious, yet can't pinpoint the issue. Any assistance would be greatly appreciated!
Here is the appearance of the header before scrolling:
The header is rolled up with content visible through it:
HTML Code Snippet:
FROM THE HEADER FILE
<nav class="navbar navbar-default wh_header"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:whc="http://www.oxygenxml.com/webhelp/components">
<!-- Header content goes here -->
</nav>
FROM THE BODY OF THE TOPIC FILE
<body class="wh_topic_page" data-spy="scroll" data-target="#toc">
<!-- Include the header -->
<whc:include_html href="${args.hdr}"/>
<div class="container-fluid">
<div class="row">
<!-- Navigation tools section -->
</div>
<div class="wh_content_area">
<div class="row">
<nav role="navigation"
class="col-lg-4 col-md-4 col-sm-4 col-xs-12 navbar hidden-print" id="wh_side_toc">
<whc:webhelp_side_toc data-tooltip-position="${webhelp.side.toc.tooltip.position}"/>
</nav>
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-12" id="topic_content">
<!-- Main topic content area -->
</div>
</div>
</div>
</div>
CSS Styles:
.navbar {
background-color: #e6edf1;
}
.wh_header {
width: 100%;
margin: auto;
height: 80px;
padding-top: 20px;
padding-right: 6px;
background-image: url(../../../resources/images/unity_gradient_resized.png);
}
.fixed-header {
position: fixed;
top:0; left:0;
width: 100%;
height: 36px;
padding-top: 6px;
}