[_bill_]

@codyd Understood. You may want to try a higher z-index and see if that helps in your situation. Try changing the “1” to something much higher, like “9999” and see if that makes any difference.

[_bill_]

@CodyD – Perhaps you can share your site URL so I can have a look at the specific issues you are experiencing? That might allow me to give you a more specific fix.

[_bill_]

The header area has a fixed height listed (100px) which causes the menu to overlap the content below it, if it bumps to a second line. Also, any sub menu items from the 1st row are layered behind (z-index: -1) the bottom row.

A workaround for this is the following “Additional CSS”:

#site-header-main {
    height: auto;
}

#access ul.children {
	z-index: 1!important;
}

#access ul ul {
	z-index: 1!important;
}

The other option would be to create a media query that kicks in at whatever width your menu bumps to a 2nd row and displays the mobile version of the menu. This width will be different for each site depending on the size of the logo or site title and the number and length of the menu items. If, for example this occurs at a width of 1000px for you, the following media query will switch to the mobile version of the menu at that width:

@media (max-width: 1000px) {

.cryout #nav-toggle {
    display: block;
}

#masthead.cryout #access {
    display: none;
}

} 

[Author]

Posts