Im trying to keep the Nav Menu allways on the front?
How can I make the Nav Menu be on top of all my content without hidding behind it?
My second question Is why the Nav Menu is "Flashing" somtimes when Im clicking On it?
js
$(function() {
// Stick the #nav to the top of the window
var nav = $('#nav');
var navHomeY = nav.offset().top;
var isFixed = false;
var $w = $(window);
$w.scroll(function() {
var scrollTop = $w.scrollTop();
var shouldBeFixed = scrollTop > navHomeY;
if (shouldBeFixed && !isFixed) {
nav.css({
position: 'fixed',
top: 0,
left: nav.offset().left,
width: nav.width()
});
isFixed = true;
}
else if (!shouldBeFixed && isFixed)
{
nav.css({
position: 'static'
});
isFixed = false;
}
});
});
$(document).ready(function() {
//set opacity to 0.4 for all the images
//opacity = 1 - completely opaque
//opacity = 0 - invisible
$('.photos img').css('opacity', 0.4);
// when hover over the selected image change the opacity to 1
$('.photos td').hover(
function(){
$(this).find('img').stop().fadeTo('slow', 1);
},
function(){
$(this).find('img').stop().fadeTo('slow', 0.4);
});
});
.menu{
text-decoration: none;
display: inline-block;
margin: 4px;
font-family: 'Amatic SC';
font-size: 30px;
<div id="nav" align="left">
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<ul id="mymenu">
<li class="menu"><a href="#about">About</a></li>
<li class="menu"><a href="#portfolio">Portfolio</a></li>
<li class="menu"><a href="#Dream">Dream</a></li>
<li class="menu"><a href="#contact">Contact</a></li>
<li class="menu"><a href="#Love">Love</a></li>
</ul>
<table class="photos" style="border-spacing: 0; border-width: 0; padding: 0 0; border-width: 0; width: 100%;" >
<tr>
<td><img src="Dad.jpg" alt="Poppy" /></td>
<td><img src="gili.jpg" alt="Poppy" /></td>
<td><img src="me2.jpg" alt="Poppy" /></td>
</tr>
<tr style="border-collapse: collapse;">
<div> <td><img src="Hotrack.jpg" alt="Poppy" /></td>
<td><img src="shir.jpg" alt="Poppy" /></td></div>
<td><img src="" alt="Poppy" /></td>
<td><img src="" alt="Poppy" /></td>
<td><img src="" alt="Poppy" /></td>
<td><img src="" alt="Poppy" /></td>
</tr>
</table>
Add a high z-index value to your navbar div like this:
#nav {
z-index: 99999;
}