How to fix menu using z-index

Question

I am struggling with something. I have two menus (http://www.omicronsolucoes.com/mat/), and I need the logo to be over the first menu. For this, I added a z-index:1 on the first menu. But now the links on the first menu wont work (because the z-index made them go behind). How could I maintain the logo as it is and make the links working again? Thanks.

Answer 1

Try adding this to your css, not sure from where it is coming but nav#ubermenu-main-13-header-menu is getting z-index as -1, so either you add this to your css file

nav#ubermenu-main-13-header-menu {
    z-index: 999 !important;
}

or try removing the z-index -1 from where is it getting applied

Answer 2

Try adding position relative and a greater z-index to the li. Then either remove position:relative of the ul or override it with position:static:

.ubermenu-nav{
 position:static;
}

.ubermenu-nav > li{
 position:relative;
 z-index:11;
}

Answer 3

I have added margin-top:-50px; to .logo class

nav .logo {
  max-height: 100px !important;
  max-width: 200px !important;
  margin-top: -50px;
}