overleaf/services/web/frontend/stylesheets/bootstrap-5/components/navbar.scss

// Default navbar
.navbar-default {
  background-color: var(--navbar-bg);
  border-color: var(--navbar-border);
  padding: var(--navbar-padding);
  position: absolute;
  top: 0;
  width: 100%;
  height: $header-height;

  .navbar-container {
    padding-left: 0;
    padding-right: 0;
  }

  .navbar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 1;
  }

  .navbar-brand {
    width: var(--navbar-brand-width);
    height: $header-height;
    padding: 0;
    background: var(--navbar-brand-image-url) no-repeat left center;
    background-size: contain;
  }

  .navbar-title {
    display: inline-block;
    font-size: var(--navbar-title-font-size);
    color: var(--navbar-title-color);
    text-decoration: none;

    &:hover,
    &:active,
    &:focus {
      color: var(--navbar-title-color-hover);
    }
  }

  .navbar-nav {
    > li {
      display: inline-flex;

      > a,
      > .dropdown-toggle {
        display: block;
        color: var(--navbar-link-color);
        background-color: transparent;
        padding: var(--navbar-btn-padding-v) var(--navbar-btn-padding-h);
        margin-left: var(--navbar-item-spacing-horizontal);
        border: var(--navbar-btn-border-width) solid
          var(--navbar-link-border-color);
        border-radius: var(--navbar-btn-border-radius);
        font-size: var(--navbar-btn-font-size);
        font-weight: var(--navbar-btn-font-weight);
        line-height: var(--navbar-btn-line-height);
        text-decoration: none;

        &.show,
        &:hover,
        &:focus {
          color: var(--navbar-link-hover-color);
          background-color: var(--navbar-link-hover-bg);
          border-color: var(--navbar-link-hover-border-color);
        }
      }

      &.subdued > a,
      &.subdued > .dropdown-toggle {
        border: 0;
        color: var(--navbar-subdued-color);
        padding: var(--navbar-subdued-padding);
        margin-left: 0;

        &.show,
        &:hover,
        &:focus {
          color: var(--navbar-subdued-hover-color);
          background-color: var(--navbar-subdued-hover-bg);
        }
      }
    }
  }

  .navbar-toggler {
    color: var(--navbar-link-color);
    border-radius: var(--border-radius-base);
    border-width: 0;
    transition: 0.2s ease-out;

    &:not(.collapsed) {
      color: var(--navbar-toggler-expanded-color);
      background-color: var(--navbar-toggler-expanded-bg);
      transition: 0.2s ease-in;
    }
  }

  .navbar-collapse,
  .navbar-form {
    border-color: var(--navbar-border);
  }
}

@include media-breakpoint-only(lg) {
  :root {
    --navbar-btn-padding-h: #{$spacing-04};
  }
}

// Different (stacked) layout for smaller screens
@include media-breakpoint-down(lg) {
  .navbar-default .navbar-collapse {
    &.show {
      min-height: calc(100vh - $header-height);
    }

    background-color: var(--navbar-bg);
    margin: 0 calc(-1 * var(--navbar-padding-h));
    z-index: 1;

    .navbar-nav {
      > li {
        display: block;

        > a,
        > .dropdown-toggle {
          margin: 0;
          padding: var(--spacing-05) var(--navbar-padding-h);
          width: 100%;
          text-align: left;
          border-radius: 0;
          border-width: 0;
        }

        // Dropdowns get custom display when collapsed
        .dropdown-menu.show {
          --bs-dropdown-spacer: 0;

          box-shadow: none;
          background-color: var(--navbar-hamburger-submenu-bg);
          width: auto;

          .dropdown-item {
            padding: var(--spacing-02) var(--spacing-06) var(--spacing-02)
              var(--spacing-08);

            &:not(.disabled) {
              color: var(--navbar-hamburger-submenu-item-color);

              &:hover,
              &:focus {
                color: var(--navbar-hamburger-submenu-item-hover-color);
                background-color: var(--navbar-hamburger-submenu-item-hover-bg);
              }
            }
          }
        }
      }
    }
  }
}

// Accessibility
.skip-to-content {
  color: var(--navbar-link-color);
  background-color: var(--navbar-link-bg);
  border: var(--spacing-01) solid transparent;
  border-radius: var(--navbar-btn-border-radius);
  font-size: var(--navbar-btn-font-size);
  font-weight: var(--navbar-btn-font-weight);
  left: calc(var(--navbar-brand-width) + var(--spacing-09));
  line-height: var(--navbar-btn-line-height);
  padding: var(--navbar-btn-padding-v) var(--navbar-btn-padding-h);
  position: absolute;
  top: -200px;
  z-index: 1;

  &:focus {
    background-color: var(--navbar-link-hover-bg);
    border: var(--spacing-01) solid var(--navbar-link-hover-color);
    color: var(--white);
    text-decoration: none;
    top: calc(($header-height - 36px) / 2); // 36px is the height of the link
  }
}

.website-redesign-navbar {
  --navbar-title-color: var(--content-primary);
  --navbar-title-color-hover: var(--content-secondary);
  --navbar-brand-image-url: url('../../../../public/img/ol-brand/overleaf-black.svg');
  --navbar-subdued-color: var(--content-primary);
  --navbar-subdued-hover-bg: var(--bg-dark-primary);
  --navbar-subdued-hover-color: var(--content-primary-dark);
  --navbar-bg: var(--bg-light-primary);

  // Navbar links
  --navbar-link-color: var(--content-primary);
  --navbar-link-border-color: var(--border-primary);
  --navbar-link-hover-color: var(--navbar-link-color);
  --navbar-link-hover-bg: var(--bg-light-tertiary);
  --navbar-link-hover-border-color: var(--navbar-link-border-color);

  // Toggler
  --navbar-toggler-expanded-color: var(--white);
  --navbar-toggler-expanded-bg: var(--bg-dark-primary);

  // Mobile view
  --navbar-hamburger-submenu-bg: var(--bg-light-secondary);
  --navbar-hamburger-submenu-item-color: var(--navbar-link-color);
  --navbar-hamburger-submenu-item-hover-color: var(--white);
  --navbar-hamburger-submenu-item-hover-bg: var(--bg-dark-primary);
}