Support » Themes and Templates » [Resolved] Colorbox z-index Pops Under Branding Element

[Resolved] Colorbox z-index Pops Under Branding Element

Viewing 4 replies - 1 through 4 (of 4 total)
  • WPyogi


    Forum Moderator

    A higher z-index makes an element stack on top of another — so that z-index seems to be doing the opposite of what you want?


    It seem that the theme’s z index for that element is 99999 (who knows why so high) while colorbox is the same–so you get conflicts.

    I understand how z index works, but what I can’t understand is why lowering that z index in the twenty-eleven theme css doesn’t solve the problem.

    OK here is the fix. This allows you to leave the ColorBox css intact.

    The JQuery ColorBox’s z-index is 999 and I know for sure the header css z index for the twenty-eleven theme is 9999. I changed the header css to 990 and it worked. (I couldn’t find the CB css to change it, as each theme has it’s individual css file, and I’d have to change them all. No Idea why each CB theme has its own zindex).

    In any event, there is no reason for the WP theme to have an index of 9999. No idea why they did that.

    #branding {
    border-top: 2px solid #BBBBBB;
    padding-bottom: 10px;
    position: relative;
    z-index: 9999; <–original

    #branding {
    position: relative;
    z-index: 990;

    For those looking to fix this, change that in your child>style.css file. Search for “child folder” on WP site if you are not familiar with it.

    I need to say also that this is not a problem unless I use Fotomoto buy buttons under the images. It seem to now be some conflict with the twenty-eleven theme and the dynamic output of the colorbox java.
    Although he pop-under solution is fixed, the Colorbx is still not working as it should when the FM buy buttons are enabled.

    Although changing the z index of the theme solved the pop under problem, there is another problem now–when the Fotomoto buttons are enabled.

    The problem, as I didn’t notice till now, is that the Colorbox overlay dimming the website page isn’t working for the header image. It does not get dimmed.

    Colorbox jquery code itself is applying


    which is why I could not find it in any of the CB css files. It gets applied dynamical on run.

    I just wanted to update this for anyone who might be trying to solve a similar problem.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘[Resolved] Colorbox z-index Pops Under Branding Element’ is closed to new replies.