Kevin Powell - Community•6mo ago

box-shadow blur causes gap around fixed header element

Got a weird issue. Have a fixed header, and apply a box shadow on the bottom of it. If I use blur (as one would) on the shadow, a tiny gap appears around the header, through which scrolling elements behind the header become visible. It's kind of visible at the top and left of the attached screenshots. Bit of an issue when adding a dropdown menu below the header.

.page_header {
  z-index: var(--z-index-header);
  font-family: var(--font-family-book);
  font-size: var(--font-size-header);
  background-color: var(--color-page-bg);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--page-header-mobile-height);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 var(--page-padding-horizontal);
  box-shadow: 0 1px 3px -3px rgba(0, 0, 0, 0.05),
    0 10px 5px -5px rgba(0, 0, 0, 0.05), 0 7px 7px -7px rgba(0, 0, 0, 0.04);
}

.page_header {
  z-index: var(--z-index-header);
  font-family: var(--font-family-book);
  font-size: var(--font-size-header);
  background-color: var(--color-page-bg);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--page-header-mobile-height);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 var(--page-padding-horizontal);
  box-shadow: 0 1px 3px -3px rgba(0, 0, 0, 0.05),
    0 10px 5px -5px rgba(0, 0, 0, 0.05), 0 7px 7px -7px rgba(0, 0, 0, 0.04);
}

0 Replies

No replies yetBe the first to reply to this messageJoin

Gaming

Programming

box-shadow blur causes gap around fixed header element