Tell me more ×
WordPress Answers is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.
up vote 0 down vote favorite

I just changed my header from a background to an image, as that seemed to be the easiest way to link the entire header to my main page (after a whole lot of trial and error with other methods). The one problem is that the image is now overlapping my sidebar instead of the other way around. It's also overlapping some of my menu bar, but it's a part that I can live with or possibly fix myself.

Here's my site with the header going over the sidebar. How do I get it back under the sidebar like it was before? And now that I think of it, is the whoe header being linked going to cause problems with the various links and buttons in the area where the sidebar overlaps it?

share|improve this question
I'm visiting your site but I can't figure out the problem. Did you remove the header image? I can see the "Search for" form on the sidebar over the header and menu. – Fernando Briano Feb 15 '11 at 20:58

1 Answer

up vote 1 down vote accepted

I'm not much of a CSS guru myself, but I think the z-index property might be helpful here. Check this link on Smashing Magazine: The Z-Index CSS property: A comprehensive look.

share|improve this answer
You're more of a CSS guru than you know! It took a little messing around to figure out which position setting would keep my sidebar from wandering to the other side of the page, but once I got that right, z-index worked perfectly! – InkAndPixelClub Feb 15 '11 at 21:14
And just in case anyone else runs into this problem, I used "Overflow:hidden" on the header to stop it from overlapping my menu bar. – InkAndPixelClub Feb 15 '11 at 21:17
Great! Glad it worked out. "Overflow:hidden" is magical, it always solves all of my CSS problems even though I'm still not very sure of what it does :P – Fernando Briano Feb 16 '11 at 0:09
At least in this case, I have a header image that is slightly larger that the dimensions of my header, so "overflow: hidden" cuts off the parts of the image that don't fit inside of my header space. – InkAndPixelClub Feb 16 '11 at 15:33

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.