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

Header vs FancyBox!! WordPress


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
as an example and click on the image.

Could anyone help me get this going right?!


Answers (3)


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.


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; }


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

in your style.css


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)