Site logo

Archived topic

Topbar AND Primary Menue Sticky?

5 replies · Started by Sven on January 7, 2022

Viewing posts 1–6 of 6

Hi there,

i would do this:

1. Disable the Customizer > Layout > Sticky Navigation.

2. Add this CSS:

@media(min-width: 769px) {
    .main-navigation,
    .top-bar {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
    }
    .main-navigation {
        top: 39px; /* offset height of top bar */
    }
    /* Offset for admin bar */
    .admin-bar .top-bar {
        top: 32px;
    }
    .admin-bar .main-navigation {
        top: 71px;
    }
}

3. If requied enable the Customizer > Layout > Header -> Mobile Header sticky option.

I made the assumption you may not want the Top Bar sticky on mobile as it and the mobile header would occupy a lot of space on small devices.

Thanks a lot David. The GP Support is really great.

Could you see the changed page (link in private area) and see, why the content from my containers are visible through my topbar, when scrolling?

If you scroll the content to the bottom the content shines through the top-bar. The strange thing is: The first container is not visble throught the topbar background. The following containers are visble throught the topbar background.

I hope i could explain the problem.

Best regards and thanks a lot for all those support.

Hi Sven,

Try add this CSS as well:

.top-bar {
    z-index: 99;
}

THANK YOU! Works perfect now.

You are welcome :)

This archived topic is closed to new replies.