Archived topic
Sticky TOP Bar with sticky header
3 replies · Started by Rostyslav on February 25, 2021
Viewing posts 1–4 of 4
Hello,
I am trying to make a sticky top bar and I also have a sticky header. When I scroll down happens this: https://ibb.co/6NFv5Th
https://ibb.co/GWxcgwm
I am using an element>block>hook>generate_before_header (css class:barra-superior)
In additional CSS this code:
.barra-superior {
position: -webkit-sticky;
position: sticky;
top: 0px;
z-index: 9999;
}Hi there,
try adding this CSS to move the sticky nav down the height of your barra-superior element:
#sticky-navigation,
#mobile-header.is_stuck {
top: 33px !important;
}
/* adjust position when admin bar is shown */
.admin-bar #sticky-navigation,
.admin-bar #mobile-header.is_stuck {
top: 66px !important;
}If you alter the height of the bar - then you will need to adjust the top: 33px to suit. Likewise the second part of the code considers the admin bar height for when your logged in.
Works! Thanks so much!
Glad to hear that!
This archived topic is closed to new replies.
