Question

On http://allmyzip.com/colorbox1/ there is a simple image gallery with the jQuery Colorbox/Lightbox plugin for WordPress that opens an auto-running slideshow of 500 x 500 images when one of the thumbnails is clicked.

The site is using WordPress 3.3.1 and the standard, unmodified Twenty Eleven version 1.3 theme that comes default with a new WordPress install. In IE 9, Firefox 10 and in Chrome
16 all three browsers are showing the slideshow images BEHIND the Header/Navbar.

I have researched this for many hours and cannot find what to change, and/or where, to correct this problem. I created a simple child theme to try to test certain changes to the z-index value in the section of the style.css shown below, as some researched suggestions recomended, but changing the z-index value here to 2 or to 999 or to 99999 still did not get the images in the slideshow to display properly. So, ALL of the CSS running the site is 100% standard, out-of-the-box Twenty Eleven CSS code.

The simple code in the child theme is limited to what you see below: There have been NO changes to the standard code at this time. What shows below is where I tried some
previous edits and then returned the settings back to standard:

`@import url(“../twentyeleven/style.css”);

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

Any specifics as to what needs to be edited and where??

Thanks very much!!

Answer 1

The header id=branding has z-index of 9999, which is the same as the lightbox, so I would expect conflicts.

Change it to 5000 or something, I see in firebug that it fixes the problem.