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 - pletely 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=".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>

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 - pletely 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./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>

• javascript
• html
• jquery
• css

3 Answers 3

Add a high z-index value to your navbar div like this:

#nav  {
   z-index: 99999;
}

You can use z-index property to keep nav on top of everything. Give the highest z-index to the nav

From the code you have provided I'm assuming the flashing you talked about is a text color change while clicking. To change this use this css

Disable color change while link is active(clicking)

a:active{
    color:blue;
}

Disable visited link color change

a:visited{
    color:blue;
}

Demo

As default z-index:1;. set any element z-index:2 if you want it to the top of any other elements.

Example:

nav{ 
    position:fixed;
    z-index:2;
}