Question

This is the jquery

<script type="text/javascript">
    $(document).ready(function () {
        $('#showhidetarget').hide();

        $('a#showhidetrigger').click(function () {
            $('#showhidetarget').toggle(150);
        });
    });
</script>

This is my sticky header nav CSS

#nav {
    background-color: #001f22;
    height: 30px;
    width: 100%;
    position: fixed;
    list-style-type: none;
    margin-top: 0px;
    margin-bottom: 0;
    float: left;
    margin-right: auto;
    margin-left: auto;

Nav Html

  <div id="nav"><ul>
         <li><a href="#home">HOME</a></li>
         <li><a href="#about">ABOUT</a></li>
         <li><a href="#portfolio">PORTFOLIO</a></li>
         <li><a href="#contact">CONTACT</a></li>
  </ul>
  </div>

Fade-in CSS

.fade {
   opacity: 0.5;
   transition: opacity .50s ease-in;
   -moz-transition: opacity .50s ease-in;
   -webkit-transition: opacity .50s ease-in;
   }

   .fade:hover {
    opacity: 1;
      }

   .fade:visited {
    opacity: 1;

      }

So basically, my fade-in/fade-out jquery images OVERLAP/go in front, of the fixed nav bar. How do i fix this so it doesn’t overlap?

Answer 1

Give the NAV bar a z-index and also to the fadeIn objects.

Make sure the NAV bar has a higher z-index, for exmaple.

.fade {
   opacity: 0.5;
   transition: opacity .50s ease-in;
   -moz-transition: opacity .50s ease-in;
   -webkit-transition: opacity .50s ease-in;
   z-index: 10;
   }

#nav {
    background-color: #001f22;
    height: 30px;
    width: 100%;
    position: fixed;
    list-style-type: none;
    margin-top: 0px;
    margin-bottom: 0;
    float: left;
    margin-right: auto;
    margin-left: auto;
    z-index: 20;
}