Admin Bar z-index CSS issue
-
Hello,
I’m using an existing template for BuddyPress. The template header requires”z-index” for IE7 purposes.. However because of this the BPress admin bar menus are dropping down behind the template wrapper. This is only occurring in IE7 ofcourse.
I’ve been playing with the #wp-admin-bar ID with no luck. Tried to move the ID to my templates CSS file. It looks like I just need to figure out a way to give the Admin Bar placement priority over my header if anyone has any advice thanks!
Here is my current header css code,
#header {height:156px; clear:both; padding:70px 49px 0 49px; width:940px; margin:0 auto; text-align:left; border:7px solid #333; border-bottom:0px; background-color:#FFFFFF; position:relative; z-index: 15;}
-
hum, do you know what is the usage of z-index?!… not related to where the things are going or the interaction with other parts of the site… http://www.w3schools.com/Css/pr_pos_z-index.asp stack does not mean push others below.
you need to manage the margin of your #header and give it a !important; to make it fit with your adminbar.
Hey thanks for the response!
As for the use of z-index:
The wordpress template has a horizontal top menu bar, with drop down category lists.
When opened in IE7 and I hover over a category name in the top horizontal menu bar, the drop down menus drop down however they drop behind the page elements.
The z-index in the header brings the drop down menu to the front of the page where it needs to be in order to make selections.
I fixed it!
I removed the z-index from the header css and added it directly to the header php,
<div id=”navigation” style=”position:relative; z-index:10;”>
Now since my template menus are working correctly the BPress drop down menus are working correctly. Thanks for helping!
- The topic ‘Admin Bar z-index CSS issue’ is closed to new replies.