CODEWITHSUNDEEP
htmlcss
Kimmie
Kimmie

Reputation: 11

My header stays fixed, but my body still scrolls through it

If i put a high z-index on the header, that part works beautifully, but then none of the links in the other divs are clickable! I am overlooking something simple, and I can't see it. I can include other bits of my css - just not even sure where to look now.

Header before scrolling and rolling up:

Header rolled up but with content showing through it:

HTML:

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">
    <div class="container">
        <div class="wh_header_flex_container">
            <div class="wh_logo_and_publication_title_container">
                <div class="wh_logo_and_publication_title">
                    <whc:include_html href="${webhelp.fragment.before.logo_and_title}"/>
                    <!--
                            This component will be generated when the next parameters are specified in the transformation scenario:
                            'webhelp.logo.image' and 'webhelp.logo.image.target.url'.
                            See: http://oxygenxml.com/doc/versions/17.1/ug-editor/#topics/dita_webhelp_output.html.
                    -->
                    <whc:webhelp_logo class="hidden-xs"/>
                    <whc:webhelp_publication_title/>
                    <whc:include_html href="${webhelp.fragment.after.logo_and_title}"/>
                </div> 

             <div class="print index">
                 <whc:webhelp_breadcrumb/>
                 <whc:webhelp_search_input/>
                 <whc:webhelp_print_link class="print"/>
                <whc:webhelp_indexterms_link/>
             </div> 

                <!-- The menu button for mobile devices is copied in the output only when the 'webhelp.show.top.menu' parameter is set to 'yes' -->
                <button type="button" data-target=".wh_top_menu_and_indexterms_link" id="wh_menu_mobile_button" data-toggle="collapse" class="navbar-toggle collapsed wh_toggle_button">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>

            <div class="wh_top_menu_and_indexterms_link collapse navbar-collapse">
                <whc:include_html href="${webhelp.fragment.before.top_menu}"/>
                <whc:webhelp_top_menu />
                <!-- <whc:webhelp_indexterms_link/> -->
                <whc:include_html href="${webhelp.fragment.after.top_menu}"/>
            </div>
        </div>

  </div>
</nav>

FROM THE BODY OF THE TOPIC FILE

<body class="wh_topic_page" data-spy="scroll" data-target="#toc">
        <!-- EXM-36950 - Expand the args.hdr parameter here -->
        <whc:include_html href="${args.hdr}"/>
        <whc:include_html href="${webhelp.fragment.before.body}"/>
        &header;

        <div class="container-fluid">
            <div class="row">

               <nav class="wh_tools hidden-print">


                    <div class="wh_right_tools hidden-sm hidden-xs">
                        <whc:webhelp_navigation_links/>

                        <whc:webhelp_toggle_highlight/>
                    </div>
                </nav> 
            </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">

                        <div class="col-lg-9 col-md-9 col-sm-9 col-xs-12">
                            <whc:webhelp_topic_content class="body"/>
                            <whc:webhelp_child_links/>
                            <whc:webhelp_related_links/>
                            <whc:webhelp_feedback/>
                        </div>

                        <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
                            <nav id="toc" data-spy="affix" data-toggle="toc" data-offset-top="205"></nav>
                        </div>
                    </div>
                </div>
            </div>
        </div> &footer;

CSS:

.navbar {
   /* background-color: transparent; */
 background-color: #e6edf1; 
    background-image: none;
   /* background-image: url(images/skin_images/unity_gradient.png);
    background-repeat: repeat-x;*/
    border: none;
    border-radius: 0;
    margin: 0;
    /*position: fixed; */
    /* z-index: 4; */
    top: 0px;
    /*box-shadow: 0 1px 2px 0 black; 
    height: 30px;   */

}

.wh_header {
   /*width: 960px;*/
width: 100%;
   margin: auto;
   /*text-align: right;*/
   height: 80px; 
/* height: 100px; */
/*    position: fixed;
    top:0px; */
    padding-top: 20px;
    padding-right: 6px;
   /* z-index: 10000; */
  /* background-color: #e6edf1; */
 /* background-color: #ffffff; */
  background-image: url(../../../resources/images/unity_gradient_resized.png); 

}

.fixed-header {
  position: fixed;
  top:0; left:0;
  width: 100%; 
height: 36px;
padding-top: 6px;

}

Upvotes: 0

Views: 251

Answers (1)

Shaun Moore
Shaun Moore

Reputation: 122

Try Z-indexing, thisis happening because your Navbar is 'below' your body 

.navbar{
z-index:100
}

Upvotes: 1

Related Questions