Hi Boris, it depends a little bit on your page layout and styling. As there is no configuration for that you could start using this CSS:
.topbar {
position: fixed;
width: 100%;
}
.nav-container.sticky.fixed {
position: fixed;
width: 100%;
top: 45px;
}
Maybe the topbar also needs a background-color. Furthermore it could be useful to wrap that CSS into a media query to apply these styles only for certain viewports, e.g.
@media only screen and (max-width: 991px) {
...
}
Please let me know if this already helps or if you need further assistance.
Thread Starter
borisj
(@borisj)
Thanks for the starter hint, terrathemes.
Yes, a background for the topbar was necessary, as well as some other things (i.e. to prevent the nav-container to overlap with the topbar; to adjust the height of the site-header).
.topbar {
position: fixed;
width: 100%;
}
.topbar .container {
background-color: #dd9933;
}
.nav-container.sticky.fixed {
position: fixed;
top: 44px;
}
.nav-container {
top: 44px;
}
.nav-placeholder {
height: 137px !important;
}
For smaller devices the nav-container is disappearing and the topbar is staying. This is intended.
This all is working well when I’m logged out. When I’m logged in, there is a conflict with the admin-bar I still have to figure out who to solve. Any hint for that? Adjusting the “Adminbar styles”? How?
Anyway, thanks for your support.
Sunny regards from Germany
Boris
Hi Boris, you can catch the admin bar by using its id and adjust the top value by the height of the admin bar.
#wpadminbar {
.topbar {
top: 32px;
}
.nav-container.sticky.fixed {
top: 76px;
}
.nav-container {
top: 76px;
}
}
Thread Starter
borisj
(@borisj)
Thanks, terrathemes. I didn’t work out with your code but it really helped to find the solution.
.admin-bar .nav-container.sticky.fixed {
top: 76px !important;
}
Solved! Boris 🙂
Oh sorry, I just noticed that I wrote LESS instead of CSS. But I am glad that you figured out the right rule. Thanks for your feedback and sharing your solution.
