WordPress Twenty Eleven Theme Problem: Divs & Images appear under Header Image

The twenty eleven theme is one of my favorite wordpress themes. Its very lightweight, well managed, fully functional and the best thing is it uses fewer resources of the web server.

Recently I came across a problem with the header image. I am using an awesome plugin for facebook which shows a slider at every page but now the problem was that the header image of the twenty eleven theme was appearing on top of the slider. You can notice this problem in the following image:

wordpress twenty eleven header image appearing on top of db plugin div

The Problem (Technically explained)

Technically speaking, the value of  z-index css property of the <header> tag,where the header image is actually placed, is quite a bit large. You can check it by viewing the css code using the FF Firebug plugin or by simply opening the css file of your theme and look for

#branding {
  z-index: 9999;
}

Solution:

The solution is quite simple. No need to ask an expert for a wordpress premium support. You can easily fix the problem yourself. Simply change the value of the z-index property to 999.

#branding {
  z-index: 999;
}

Leave a Reply