CODEWITHSUNDEEP
javascripthtmljquerycss
Ravid Gal
Ravid Gal

Reputation: 47

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>

Upvotes: 1

Views: 9022

Answers (3)

Satish kumar
Satish kumar

Reputation: 16

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;
}

Upvotes: 0

tkay
tkay

Reputation: 1726

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

Upvotes: 0

AndrewL64
AndrewL64

Reputation: 16301

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

#nav  {
   z-index: 99999;
}

Upvotes: 5

Related Questions