[Resolved] Sticky header without javascript with adminbar support

[Jeff]

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

[David]

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;
}

[Jeff]

Good catch. Safari does support sticky without -webkit starting with Safari 13 (Sep 2019). See css-sticky at caniuse.com

[David]

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.

[Author]

Posts