Getting Sticky Headers and the WP Admin Bar to Behave

Solve the problem of overlapping WordPress sticky head and management bar

In WordPress themes, the sticky head (or fixed position head) overlaps the admin bar. Both use position: fixed; top: 0;, resulting in visual conflicts. Since the admin bar has z-index of 99999, it usually covers the sticky head of the subject (and vice versa). This article will explain how to solve this problem using CSS (and Sass).

(Note: Some topics use JavaScript to locate sticky elements. If JavaScript continues to update the inline top properties, the following method is invalid.)

Use CSS to adjust head position

For simplicity, we use the .sticky-header class to represent elements pinned at the top of the page. You should find the right selector based on your topic. We assume that its top position value is 0. If the top value has been offset, the following measurements need to be adjusted.

When the admin bar is visible at the front end, WordPress attaches the .admin-bar class to the element of the page. (This is usually handled by the header.php function in body_class();.) This class allows us to adjust the top position of the sticky head.

/* 原有CSS... */
.sticky-header {
  position: fixed;
  top: 0;
}
/* 新增CSS... */
.admin-bar .sticky-header {
  top: 32px;
}

The height of the management bar is 32px, we just need to move the sticky head down. But the problem is that the admin bar height is not always 32px.

CSS for small screens

On screens with widths less than 783px, the management bar height is 46px. We need to modify the code to compensate:

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

If you prefer mobile-first CSS, use the following code:

.admin-bar .sticky-header {
  top: 46px;
}
@media screen and (min-width: 783px) {
  .admin-bar .sticky-header {
    top: 32px;
  }
}

Create reusable mixin with Sass

If you build a theme with Sass, we can encapsulate it into a reusable mixin:

@mixin admin-sticky-fix( $offset: 0 ) {
  $narrow-offset: 46px;
  $wide-offset: 32px;
  @if $offset != 0 and type-of($offset) == 'number' {
    $narrow-offset: $narrow-offset + $offset;
    $wide-offset: $wide-offset + $offset;
  }
  .admin-bar & {
    top: $narrow-offset;
    @media screen and (min-width: 783px) {
      top: $wide-offset;
    }
  }
}

This mixin accepts an optional parameter $offset that allows the top value of the specified element (non-0). If no offset is specified, mixin will assume to be 0. If you manually specify $offset, the @if condition will modify the default management column height value.

How to use:

.sticky-header {
  position: fixed;
  top: 0;
  @include admin-sticky-fix;
}

.sticky-header-offset {
  position: fixed;
  top: 20px;
  @include admin-sticky-fix(20);
}

Conclusion

Through the above code snippet, the conflict between the sticky head and the WordPress management bar can be easily solved. Sass mixin improves the reusability of the code.

FAQs (FAQs)

(The FAQ part is omitted here because the article is too long and does not match the pseudo-original goal. The FAQ part can be added or modified as needed.)

The above is the detailed content of Getting Sticky Headers and the WP Admin Bar to Behave. For more information, please follow other related articles on the PHP Chinese website!