Dropdown menu disappears behind slider on Chrome, not Firefox/Safari

HTML & CSS
1

I’m a hypnotherapist with a Wordpress site built using the Vamtam Health Center theme, and after upgrading to the latest version, the dropdown menu on my home page disappears behind the slider on Chrome, but not Firefox or Safari. Here’s the site:

I tried adding the following code, but it doesn’t change anything:

#main-menu .menu .sub-menu {
  position: absolute;
  z-index: 999;
}

My web designer is on sick leave, and Vamtam support requires me to disable plugins before they’ll look at it, which I can’t do because it’s a live site. I can’t seem to figure this out by myself, so any help would be greatly appreciated!

2

The dropdown menu is behind the slider in Firefox too for me. Could it be because your .submenu is in a div with a class of sub-menu-wrapper, which does not have the z-index declared? Just a thought, because I am not an expert on CSS, but try

#main-menu .menu .sub-menu-wrapper {
     z-index: 999; 
}

instead.

3

You need to give your container a higher z-index than the content section. The parent of the navigation section needs a higher z-index than what it has now.

.fixed-header-box{z-index:11;}

The main content is all held within “.header-middle” which has a z-index:10; set. So the .fixed-header-box just needs a z-index higher :wink: .

EDIT - Actually give it a 12 (heck might as well do 999 at this rate to be safe for everything in the future :stuck_out_tongue: ) z-index since the services dropdown menu option is so long I notice it’s passing the main content section and being hidden behind another part of the page with a z-index.

4

Thanks for the responses! I appreciate your help.

Increasing the z-index for .fixed-header-box gets the menu to appear above the slider (I had to add an !important to make it work) but now I’m getting a light blue bar below the menu on other pages, like this:

http://www.morpheusclinic.com/contact-us/

Any suggestions for fixing this?

5

Under Contact Us?
That’s the border set on “.page-header .page-header-content”

6

Never mind! There’s a blue bar under the menu that appears when I’m logged in, but it doesn’t appear in the cached version of the site. I think this will work and I would consider this issue resolved. Thanks so much!

7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.