CODEWITHSUNDEEP
javascriptjqueryhtmlcsspopup
RamDesk
RamDesk

Reputation: 40

jQuery Image Popup and fixed navigation

I downloaded Fancybox pluging from http://fancyapps.com/fancybox and used for open my gallery images in popup.
and also I used fixed navigation when scrolling.
My problem is, when I click on images, it will open in a popup window. It is ok. But, fixed navigation menu is still appear on the popup window. a busy cat ![problem][1]

Navigation Menu HTML

<div class="nav-container">
        <div id="nav">
            <ul>
                <li><a href="#home">Home</a></li>
                <li><a href="#shop">shop</a></li>
                <li><a href="#gallery">Gallery</a></li>
                <li><a href="#facilities">Facilities</a></li>
                <li><a href="#terms">Terms</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul> 
           <div class="clear"></div> 
          </div>
        </div>
    </div>

Navigation Menu Javascript

jQuery("document").ready(function($){

var nav = $('.nav-container');

$(window).scroll(function () {
    if ($(this).scrollTop() > 136) {
        nav.addClass("f-nav");
    } else {
        nav.removeClass("f-nav");
    }
 });
});

Because of that navigation, user can't close the popup window. Guys, please help me to solve this.

Upvotes: 0

Views: 509

Answers (1)

Florian Segginger
Florian Segginger

Reputation: 480

Your navigation menu is probably set as position: fixed. This makes it have a z-index which is, by default, above every position:static placed elements (which is the default).

What you should do is edit the CSS of the lightbox so it has position: relative which should make it go above your navigation (assuming it's later in the DOM).

If it's still showing up below your navigation, check what the z-index of your f-nav class is, and change the z-indexof your lightbox so it's higher than the one of the navigation.

Upvotes: 1

Related Questions