How to make topbar sticky along with the navigation

Updated on:

GP Premium offers a sticky navigation feature found at Customizer > Layout > Navigation. This sticky navigation relies on JavaScript, making it a bit tricky to adapt for use with the topbar.

We’re about to introduce an easier solution: a CSS method. While it doesn’t have the fancy animated transitions of the GP sticky navigation, it gets the job done. This CSS approach provides a simple and effective way to create a sticky navigation and sticky topbar that works well.

This method works for topbars that are created by widgets, and elements that use GP’s generate_before_header hook.


1. Disable GP’s sticky navigation

Go to customizer > layout > sticky navigation, and disable the sticky navigation.

2. Use a gP header element to create a header wrap

Go to appearance > elements, create a new header element, and set the merge option to merge, set location to entire site.

This step creates a header wrap that wraps the Topbar and the Site header/Navigation(if you are using the Navigation as header option).

3. Add CSS to override the header-wrap’s absolute position and make it sticky

.header-wrap {
    position: sticky;
    top: 0;

That’s it, enjoy your sticky topbar and navigation!