Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

Header vs FancyBox!! WordPress

  • SOLVED

Hi guys,

Recently i asked for some help to make my header stand in front of my scrollable blog.

Now I am using <strong>FancyBox for Wordpress</strong> and the photos are previewed behind the header!!

Please have a look, visit http://rockwellhouse.co/wordpress/cold-but-beautiful/
as an example and click on the image.

Could anyone help me get this going right?!

Thanks

Answers (3)

2010-10-26

Cosmin Popovici answers:

Modifying the z-index property to this:

#head { z-index:12;}

in the style.css on line 18 will do the trick.

It just needs one point over the z-index value of the nav/content containers :)


Steven Ellis comments:

perfect! that was simple! great!
thank you.

2010-10-26

Utkarsh Kukreti answers:

Try changing the z-index on #head to 500.

Add this to your style.css
#head { z-index:500; }


Utkarsh Kukreti comments:

Or edit
#head { background-color:#FFFFFF; left:-100px; padding-top:0; position:fixed; top:0; z-index:999; }

to

#head { background-color:#FFFFFF; left:-100px; padding-top:0; position:fixed; top:0; z-index:500; }

in your style.css

2010-10-26

Ben Huson answers:

Your header is now appearing in front of the default z-index for FancyBox.
If you add the following to your theme's styles.css this should force FancyBox to be in front.

#fancy_overlay {
z-index:1000 !important;
}
#fancy_outer {
z-index:1000 !important;
}

(ed: or change the header z-index to be be less as the previous answer - I think we cross posted)