CSS drop down menu disappearing behind content

tickel

Hi Guys,

After lurking around these forums for an age and despite learning how to cobble together my own (yet rubbish) style I have become stuck.

I have followed vrijvlinder's old posts and created a menu using cssportal.com/css3-menu-generator/#

The drop downs on the menu appear behind the main content. I have checked as best I can for Z-index values which may cause this, however my menu should be rated higher and therefore the drop down should show on top.

My website is emeraldcommunity.net

Please can someone have a look and see if you can see why this may be happening? Let me know if you want me to post code.

The site is still not finished, I am testing out ideas presently and need the drop downs to work :-)

Any help would be greatly appreciated.

Cheers

Tickel

vrijvlinder

Yes it is hard to say what is causing that. I know there are several z-index in the theme there that have !important on them. Look for things in the theme that have a higher z-index. It could be an html mistake or a css mistake.

How did you add it ? did you add it to the default.master ?

I suggest you make a module and add it that way. Look at the widgets plugin and create a simple module and make it show up in the #Head section . That may work better.

tickel

I added HTML in default master.tpl and CSS in custom.css

It also happens on the side menu which uses the default CSS, I don't recall modifying it. (the icons are currently hidden as I need to make new ones that fit the theme)

This makes me think it is something in the content bringing it to the front. I will go through the code and see if I can find it. If I still struggle I will tidy the code up annotate it and post here to see if anyone else can spot the issue.

I'll also put the fix should I find it to save someone else having the same issue!

tickel

Found the issue - z-index is not used unless a position value has been given to the element. The content in vanilla's default theme (which I modified) does not have position set and therefore ignores any z-index values.

I hope that makes sense!

Further guidance for those that get the same issue https://css-tricks.com/almanac/properties/z/z-index/

Now I need to use a position value which is going to keep the content how I want.

tickel

Unfortunately - It still does not work - the only zindex value which works is -1.

This will allow the dropdown to appear over the content, however links in the content are no longer use able when doing this. I will continue to try and find a solution.

R_J

z-index only has an effect if the element you use it with has a position. With that knowledge, I worked I applied position:relative;z-index:5; to all the elements in your menu starting from #menu-bar ul.

Applying that style to #Head had the effect you try to achieve. Don't ask me why. I find my way through CSS only by chance...

tickel

I have the same issue moving the search box. If I position it lower down to the content wrapper it appears behind it, there must be something that forces the content to always be in front and it is not z-index as setting this to -1 shows that my css is being picked up. I will post my code later in the week if not fixed as I may need a hand!

R_J

@tickel: reload the page to see my answer above. This will also help you to find a solution for the searchbox

vrijvlinder

Why don't you try another theme? Try Glass or GreenGlass theme and report back.
That way if you find it is a theme issue, then you can copy over the stuff that worked to your original theme.

Or use the plugin Index to add your links. That plugin was created using the generators css and I made it into a plugin and you can add links in the dashboard.

vrijvlinder

Try this

#Head {
background: #2F4F2F;
opacity: 0.8;
color:#fff;
z-index: 9999999;
position: relative;
}

vrijvlinder

@R_J said:
Applying that style to #Head had the effect you try to achieve. Don't ask me why.

You need to look at the z-index order of the containers Head and Body.

Head did not have a z-index or a position, Body did which is why it showed on top of everything. z-index=-1 works to move something to the back. By changing the z-index of the content to -1 you pushed it back under the Body which is why the links from the discussion list did not work.

tickel

Thanks R_J and vrijvlinder - shame I logged off before I saw earlier comments :-)

Adding the Zindex to head worked, I had tried that in the past but did not have a position value so it did not apply.

I can now get back to sorting out the theme :-) thanks again.