I followed the merged header example provided in your Using the Header Element Type video, and am using the GP Premium sticky menu Customizer option. With the merged header and sticky menu, what would be the best way to make the top bar sticky as well?
I’ve looked through similar support threads (e.g. Sticky Top Bar AND Main Navigation), but can’t get the CSS working with the merged header; in addition, I’d really like to still use the premium sticky menu option (with its fade-in and different logo option).
Right now, I’m using this CSS:
.top-bar {
position: fixed;
width: 100%;
top: 0px;
z-index: 9999;
}
.admin-bar .top-bar {
top: 32px !important;
}
But it isn’t ideal, as the contents of the top bar will cover the header / menu in certain circumstances when the top bar’s width increases (such as when a user on mobile uses Google Translate to auto-translate the site and the text is lengthier in their language, causing the top bar to become an extra line of text in width).
Would anyone be able to help me with a better way to do this?