<style>
/* Target the header container */
.navbar, .top-bar, .site-header {
  position: relative; /* make overlay position relative to this */
}

/* Add overlay inside the header */
.navbar::after,
.top-bar::after,
.site-header::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(217,217,217,0.5); /*
  z-index: 0; /* sits behind content */
}

/* Ensure logo and links are above the overlay */
.navbar * , .top-bar *, .site-header * {
  position: relative;
  z-index: 1;
  color: #022a4b !important; /* make text visible */
}

/* Optional: link hover effect */
.navbar a:hover, .top-bar a:hover, .site-header a:hover {
  color: #d9d9d9 !important;
}
</style>