[Plugin: NextGEN Gallery] images appear under header

I have the same problem!

Me too have this problem. No solution?

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

https://www.womenbuildingbridges.com/resources/

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

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

Thanks for all the help! : )

Hi,

I’ve been using nextGEN on my site as well, and it was working great until I upgraded to the latest version of WordPress. Now I’m having the same issue.

See screenshot: https://acousticmonster.com/wp-content/uploads/2011/12/NextGenError1.jpg

It looks like the header section is being forced on top of the lightbox, or the lightbox is being forced below the header. Not sure though.

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

I have experienced that this problem does not apply to NextGen Gallery only. I downloaded Awesome Flickr Gallery, and I still have the same problem. So this must be a problem with the latest upgrade of WordPress, or the TwentyEleven theme.

My gallery

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.

Thanks simma101!

Your solution worked for me. I was using a modified version of Twenty Eleven. I’m not sure how the code for the “light box” works, but hopefully Alex can update NextGEN to compensate for that z-index positioning for future updates.

It also worked for me. Thanks simma101

Thanks simma101! It did work for me to ??

Fixed in next update :

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

Same Problems too ??

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!

Sorry, everyone, the solution I posted actually DID NOT work for me. It appeared to be OK when I first viewed the page. But when I added another gallery and went back to the first, it did not work.

Any other suggestions will be appreciated. In the meantime, I’ll have to use the browser version until the plug-in is updated. ??

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