Archived topic
Sticky Header
3 replies · Started by Ivo on February 21, 2022
Hi,
Could you please help me that the sticky header does not shrink?
Domain:www.neu.akpz.ch
http://neu.akpz.ch/wp-content/uploads/2022/02/Sticky-Header.jpg
http://neu.akpz.ch/wp-admin/upload.php?item=1388
Thanks,
Best regards
Ivo
/* Sticky Header */
@media (min-width:769px) {
.site-header {
position: sticky;
top: 0;
width: 100%;
z-index: 999;
}
.main-navigation {
position: sticky;
top: 112px;
width: 100%;
z-index: 999;
}
}
Hi Ivo,
The total height of your header is 143.25px.
See this for reference: https://share.getcloudapp.com/wbuYlXm8
You’ll need to modify the top value of the main nav to 143.25px as well.
@media (min-width:769px) {
.site-header {
position: sticky;
top: 0;
width: 100%;
z-index: 999;
}
.main-navigation {
position: sticky;
top: 143.25px;
width: 100%;
z-index: 999;
}
}Hope this helps! Let me know if I missed something. :)
Hi Fernando,
Thanks, it works.
Best regards, Ivo
You’re welcome Ivo! Glad to be of assistance! Feel free to reach out anytime if you’ll need assistance with anything else. :)
