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!