CSS Question
Navigation bar being hidden behind pics
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);
});
});
css
.menu{
text-decoration: none;
display: inline-block;
margin: 4px;
font-family: 'Amatic SC';
font-size: 30px;
html
<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>
html of the problematic content
<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>
Recommended for you: Get network issues from WhatsUp Gold. Not end users.
Answer Source
Add a high z-index value to your navbar div like this:
#nav {
z-index: 99999;
}
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download