Archived topic
Sticky Top Bar and Menu with Merged Header
3 replies · Started by hastibe on March 20, 2022
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?
Hi Hastibe,
Perhaps you can alter the layout of your menu on mobile to prevent this from happening?
For instance, you may set your top-bar items to file in one column and have a smaller font size on mobile with this CSS:
@media (max-width: 768px) {
.header-wrap .top-bar .inside-top-bar.grid-container {
flex-wrap:nowrap;
flex-direction:column;
font-size:12px
}
nav#sticky-navigation.is_stuck {
top:80px !important;
}
}Kindly replace 12px in the code to your preferred font-size value. :)
Here is an article with regards to adding CSS: https://docs.generatepress.com/article/adding-css/#additional-css
Adding this through additional CSS should work.
Hope this helps! :)
Hi Fernando,
Thanks so much for the quick response!
Haha, oh gosh, and that is a really simple solution, which I think should work just fine.
:)
You’re welcome Hastibe! Glad to be of assistance!
I’ve done as requested as well. Feel free to reach out anytime if you’ll need assistance with anything else. :)
