Archived topic
Topbar AND Primary Menue Sticky?
5 replies · Started by Sven on January 7, 2022
Hello,
i used this https://generatepress.com/forums/topic/make-top-bar-sticky/ to make my topbar sticky.
But as i also have my Primary Menu sticky it does not work. The topbar is hidden behind the Menubar.
Is there any chance to have both sticky?
Thanks in advance.
Hi there,
i would do this:
1. Disable the Customizer > Layout > Sticky Navigation.
2. Add this CSS:
@media(min-width: 769px) {
.main-navigation,
.top-bar {
position: -webkit-sticky;
position: sticky;
top: 0;
}
.main-navigation {
top: 39px; /* offset height of top bar */
}
/* Offset for admin bar */
.admin-bar .top-bar {
top: 32px;
}
.admin-bar .main-navigation {
top: 71px;
}
}
3. If requied enable the Customizer > Layout > Header -> Mobile Header sticky option.
I made the assumption you may not want the Top Bar sticky on mobile as it and the mobile header would occupy a lot of space on small devices.
Thanks a lot David. The GP Support is really great.
Could you see the changed page (link in private area) and see, why the content from my containers are visible through my topbar, when scrolling?
If you scroll the content to the bottom the content shines through the top-bar. The strange thing is: The first container is not visble throught the topbar background. The following containers are visble throught the topbar background.
I hope i could explain the problem.
Best regards and thanks a lot for all those support.
Hi Sven,
Try add this CSS as well:
.top-bar {
z-index: 99;
}
THANK YOU! Works perfect now.
You are welcome :)