[Plugin: NextGEN Gallery] images appear under header

I have the same problem!

Yes, my NextGen gallery has lost the pop up lightbox feature when you click on the photos on this page:

http://www.womenbuildingbridges.com/resources/

The photo displays like this instead of the popup light box:

http://www.womenbuildingbridges.com/wp-content/gallery/wbb/women_building_bridges-cd.jpg

Thanks for all the help! : )

I am having the very same problem after upgrading to the latest WordPress and NextGen Gallery. I have disabled all plug-ins except NextGen and the problem persists. I am currently running under Mamp on my computer, but cannot consider moving to a live server with this kind of problem.

Robert Lott

The latest version (1.3) of the Twenty Eleven theme has changed the “z-index” of the header.

Edit the branding style in “style.css” as follows (can edit it via WordPress admin – “Appearance -> Editor”:

#branding {
	border-top: 2px solid #bbb;
	padding-bottom: 10px;
	position: relative;
	z-index: 9999;
}

to:

#branding {
	border-top: 2px solid #bbb;
	padding-bottom: 10px;
	position: relative;
	z-index: 999;
}

To get NextGen working again.

Note that this will be overridden if you upgrade the theme again so consider creating a child theme for this fix. Also I can’t guarantee this change won’t break something else, I’m no Twenty Eleven expert.

It also worked for me. Thanks simma101

Fixed in next update :

http://code.google.com/p/nextgen-gallery/source/detail?r=1053

I had this problem, too, but am using the very awesome Entrepeneur (yes, that spelling is correct) theme by Ollie McCarthy. I tried changing the first line, but then the links didn’t line up and my menu broke. So I had to change the index in all layers so everything would line up.

Here is the code I now have. The lines of hidden code were the original code before I changed the z-index values:

/** Main Navigation **/

.menu-header ul {position:absolute; top:99px; left:-5px; font-size:12px; letter-spacing:0px;}

.menu-header ul li {position:relative; display:block; float:left; margin-right:3px;}

.menu-header ul li a {position:relative; z-index:999; padding:10px 10px 15px 10px; color:#dcecf8; opacity:0.8}

/** PREVIOUS CODE: .menu-header ul li a {position:relative; z-index:99999; padding:10px 10px 15px 10px; color:#dcecf8; opacity:0.8} **/

.menu-header ul li a span {}

.menu-header ul li span {opacity:0; display:block; background:url(images/dark_blue_nav_highlight.png) scroll transparent no-repeat; position:absolute; top:-15px; width:217px; height:60px; z-index:998; }

/** PREVIOUS CODE: .menu-header ul li span {opacity:0; display:block; background:url(images/dark_blue_nav_highlight.png) scroll transparent no-repeat; position:absolute; top:-15px; width:217px; height:60px; z-index:99998; }**/

.menu-header ul li ul { background:#82789a; display:none; position:absolute; width:143px; top:32px; text-align:center; padding:0px 1px 1px 1px; font-size:12px; z-index:9999; opacity:1; border-radius:3px; }

/** PREVIOUS CODE: .menu-header ul li ul { background:#82789a; display:none; position:absolute; width:143px; top:32px; text-align:center; padding:0px 1px 1px 1px; font-size:12px; z-index:9999999; opacity:1; border-radius:3px; }**/

.menu-header ul li ul li a {display:block; width:123px; float:left; background:#82789a; color:#82789a; padding:10px 10px; margin-top:1px;}

.menu-header ul li ul li ul {top:0px; left:139px;}

Thank you, simma 101! I was practically whimpering last night because this didn’t work and I wanted to use it so much. It was great to get up on a Saturday morning and find a solution!

It worked for me but I had to go even lower with the z-index.