Archived topic
Sticky header without javascript with adminbar support
3 replies · Started by Jeff on January 14, 2021
Hi folks, I've strugged with the sticky header without javascript with adminbar support. After wrestling I got this code to work. Maybe I've missed something obvious? In any case, I wanted to share what worked for me, since you've been so helpful and I couldn't find what worked for me. Maybe another user can make use of this.
Note: I've updated this with the response below.
/* sticky header & wpadminbar support */
#mobile-header,
#masthead {
position: sticky;
position: -webkit-sticky;
position: -top:0;
}
.admin-bar #mobile-header,
.admin-bar #masthead {
top: 32px;
}
@media screen and (max-width: 782px) {
.admin-bar #mobile-header,
.admin-bar #masthead {
top: 46px;
}
#wpadminbar {
position: fixed;
}
I use #mobile-header and #masthead depending whether there is a mobile header for the theme, so this code works on both kinds of sites.
Sometimes the #wpadminbar gets a position:absolute; so I override this.
I wrote up a more comprehensive description with various other options I encountered, which were less than satisfying: WordPress Adminbar Sticky
Hi there,
the only thing you need to include is the -webkit-sticky property for webkit browsers eg. Safari. So your initial CSS rule should look like this:
#mobile-header,
#masthead {
position: sticky;
position: -webkit-sticky;
top: 0;
}Good catch. Safari does support sticky without -webkit starting with Safari 13 (Sep 2019). See css-sticky at caniuse.com
Yeah - still lots of users ( including my Wife lol ) who have not made the leap to the 2020s yet :) As well as other variant browsers still playing catchup.
Glad to be of help.
