Ask your WordPress questions! Pay money and get answers fast!

Layer Header Menu Background Image in front of Slider on Homepage WordPress

SOLVED

I would like to replace the current header menu background with a graphic that I am going to create. I currently have a solid colored place holder graphic. The graphic has a curved edge on the bottom and I would like it to overlap the slider without the second level menu items getting hidden behind the slider. I would like it to display similarly to the menu header at www.taylorengineering.com.

I'm looking for someone I can send the files to for a quicker fix. I've played with the z-index as suggested by the responses I have gotten, but with no success. My current site is pleng.us and the theme name is pleng from themeforest.

2012-07-07 by Alison Galy

Answers (6)

2012-07-07

Romel Apuya answers:

i can work on this fast..

hit me on skpye: rrapuya

Romel Apuya comments:

Alison Galy comments:

How can I send you the files and what files do you need? Email?

Romel Apuya comments:

Alison Galy comments:

I cannot see any of your responses, I can only see "Romel Apuya says:" but the rest is blank. I tried sending you a message. Can you reply to me in a message?

Romel Apuya comments:

2012-07-07

Jarret Minkler answers:

You need to splice the lighter blue part of the logo, and use that as the background for the top_bar, giving it a z-index of say, 25. Then give the slider div a zindex of 20.

It already overlaps the menu over the slider, if not bump up the z-index to 30.

2012-07-07

Spencer Tomosvary answers:

The object needs wmode set to transparent, the header and flash object need to be in separate divs... the header needs to be set with position as absolute and the object div needs to be relative. The zindex on the header should be higher than the zindex on the object.

This article walks you through step by step:
http://www.alohatechsupport.net/webdesignmaui/maui-web-design-articles/layer_flash_under_html.html

And this article explains a bit about css layering:
http://www.onextrapixel.com/2009/05/29/an-indepth-coverage-on-css-layers-z-index-relative-and-absolute-positioning/

2012-07-07

Jatin Soni answers:

The only way to do is playing with z-index.

If you are using jquery sliders than you can assign nevgation menu item z-index to higher value like something z-inde: 9999 so all element below this z-index value will go below the menu.

If you are using flash object as a slider than you need to add below parameters to your flash embed code

<param name="wmode" value="transparent">
or
<param name="wmode" value="opaque" />

If you have any issue still exists let me know and give me access to your files so I can have a look and fix the issue for you.

Alison Galy comments:

Hello,

I am using a jquery slider but I have adjusted the z-index values with no success. How can I give you access to my files...can I email them to you? Which files do you need?

Thanks again

Jatin Soni comments:

Alison Galy comments:

This site does not let me see what you wrote in your reply. Is it possible for you to message me through this thing...or email at alicatgatorgirl at yahoo dot com?

Jatin Soni comments: