.header-navigation {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;

  /* Keep a higher value of z-index to keep header above regular positioned content. */
  z-index: 100;
  display: flex;
  align-items: center;
  min-height: 48px;
  font: var(--osds-font-body);
  background-color: var(--osds-main-nav-container-bg);
  gap: 8px;
}

  /* Media query from Gin theme. */
  @media (min-width: 976px) {
  .toolbar-fixed[data-toolbar-menu='open'] .header-navigation {
      left: 240px
  }
    }
  /* !important overrides socialbase/navbar.scss. Remove once the socialblue header is gone. */
  @media (min-width: 976px) {
      [dir='ltr'] .gin--vertical-toolbar.user-logged-in .header-navigation {
        left: 66px !important;
      }

      [dir='rtl'] .gin--vertical-toolbar.user-logged-in .header-navigation {
        right: 66px !important;
      }
    }
  .has-hamburger-menu .header-navigation {
    flex-wrap: wrap;
  }
  .header-navigation__branding {
    flex-shrink: 0;
  }
  .header-navigation__nav {
    flex: 1 1 auto;
    min-width: 0;
  }
  .header-navigation__nav.contextual-region {
      position: static;
    }
  .header-navigation__other {
    flex-shrink: 0;
  }

/* The vertical or fixed toolbar is already fixed so the navbar needs to be made to just sit on the page. */

/* Media query from Gin theme. */

@media (max-width: 975px) {

.toolbar-vertical .header-navigation, .toolbar-fixed .header-navigation {
      position: relative
  }
    }