.header__navigation {
  position: relative;
  z-index: 1;
}

.header__navigation:after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 60px;
  left: 0;
  right: 0;
  bottom: calc((100vh - 60px) * -1);
  background: rgba(0,0,0,.5);
  transition: 300ms all linear;
  opacity: 0;
  visibility: hidden;
}

.header__navigation.hovered:after {
  opacity: 1;
  visibility: visible;
}

@media(max-width: 960px) {
  .header__navigation:after {display: none !important;}
}