Are you a GenerateCustomer?

Do you have an active GP Premium or GenerateBlocks Pro license key?

Create a GenerateSupport account for GeneratePress and GenerateBlocks support in one dedicated place.

Create an account
Already have a GenerateSupport account? Login

Just browsing?

Feel free to browse the forums. Support for our free versions is provided on (GeneratePress, GenerateBlocks).

Want to become a premium user? Learn more below.

Z-index menu/submenu

  • Hi,
    I can’t get the sub-menu to switch to the background. How can I make the menu go over the sub-menu? I’ve used z-indexes but I can’t get the desired result.

  • 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.

  • sorry here’s an image where you can see what I want to do. the sub-menu goes behind the menu at the border

  • 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.

  • Ok I change some things and it’s ok. Thanks

  • Glad to hear that

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.