How to make fixed divs appear below the WordPress admin bar

Here’s a really nice simply solution to an annoying problem that many WordPress developers face. Let’s say you add a menu with a fixed position at the top of page, and you then login to WordPress – once you navigate back to the front-end of your website, the WordPress admin menu bar appears and having a fixed position, hovers inconveniently over the top of your nice fixed-position menu. The way around this? It’s simple – just use WordPress’s automatically applied .admin-bar class (it’s attached to body by default) to target and manipulate the admin bar. Assuming your fixed div has the class of .fixedBar (just change this to match yours) you can use the following code:

.admin-bar .fixedBar {
 top: 32px;
}

And don’t forget those mobile users:

@media screen and (max-width: 782px) {
  .admin-bar .fixedBar {
    top: 46px;
  }
}

This will automatically apply 32px of margin to your fixed-position div whenever you are logged in (and 46px when you’re on mobile).