How to implement sticky navigation with CSS only

The Sticky Navigation option in GP Premium currently uses javascript as it is necessary for the Transition options.

If you don’t need the Transition options then we can actually use the CSS below.

Default Site header

If you are using the default site header, then use the following CSS:

.site-header {
    position: sticky;
    top: 0;
}

The code would work for both desktop and mobile.

If you are using the Navigation as Header option, then use the following CSS:

#site-navigation {
    position: sticky;
    top: 0;
}

This code would work for both desktop and mobile.

If you are using the Mobile Header option, then add the following CSS as well for mobile:

#mobile-header {
    position: sticky;
    top: 0;
}