How do you stop the WordPress admin bar from covering the header?

If you are logged in and the site header sits under the black admin bar, push the header down by the height of that bar. The reliable CSS version uses the admin-bar class WordPress already adds to the body. The PHP version from the November 17, 2016 note prints an inline margin only when the bar is on screen.

The CSS I used before that post only worked when the navigation was a Bootstrap navbar:

.logged-in .navbar { margin-top: 32px; }

The body class works without Bootstrap:

body.admin-bar header { margin-top: 32px; }

@media (max-width: 782px) {
  body.admin-bar header { margin-top: 46px; }
}

The 2016 snippet forgot the phone height. Logged-in visitors on a narrow screen get a 46px bar, not 32px. Use both.

If you would rather keep the offset next to the header markup, this is the original approach. It prints a style attribute only when is_admin_bar_showing() is true. Keep any class or id the header already has.

<header <?php if ( is_admin_bar_showing() ) { echo 'style="margin-top:32px;"'; } ?>>

Add the 46px case yourself if you use the PHP version on a theme that is viewed on a phone while logged in. The stylesheet above is the one I would ship now.

Neither fix belongs on a page the public sees while logged out. Both are gated on the admin bar, so the logged-out layout does not grow a mysterious gap.

If the overlap is one symptom of a theme that needs a proper pass, that is site rescue, not another margin.