Z-index menu/submenu

Hi there,

1. edit the Customizer > Layout > Site Header and remove the Top and Bottom Padding.

2. now increase the Line Height of the menu items. Which you did with this CSS:

.sf-menu li a {
    line-height: 24px !important;
}

Sett the height to like 100px.
Now the Menu will define the height of the header, and the submenu will appear below it.

OK, so you can’t z-index an element to appear behind its parent element.
But what you can do is fake it.

Try adding this CSS:

.site-logo {
    z-index: 100000;
}
.menu-item-has-children .sub-menu {
    margin-top: -40px;
}
.menu-item-has-children .sub-menu:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 40px;
    background-color: var(--beige);
    border-radius: 0 0 40px 40px
}

What this does is create a pseudo element on the sub menu thats 40px high, beige and has rounded corners.
Then the submenu gets pulled up with neg margins to sit in front of the header.
And we bump the site logos z-index way up so it sits in front.

Glad to hear that