This is the javascript snippet using jquery
<script type="text/javascript>
$(document).ready(function () {
$('#showhidetarget').hide();
$('a#showhidetrigger').click(function () {
$('#showhidetarget').toggle(150);
});
});
</script>
Below is my CSS for a sticky header navigation bar
#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;
This is the HTML structure of the Navigation Bar
<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>
CSS for image fade-in effect
.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;
}
I have an issue where the fading images overlap the fixed navbar. How can I prevent this?