Реализация фиксированной нижней части шапка

У меня есть хедер, он состоит из верхней и нижней частей, я хочу сделать так, чтобы при скроле нижняя часть прижалась к верху странице и спускалась вниз. position: sticky; не срабатывает, но возможно я делаю что-то не так. Подскажите как возможно это реализовать.

<header class="header">
        <div class="header-top">
          <div class="container">
            <div class="row align-items-center">
              <div class="col-auto">
                <a href="#" class="header-logo">
                  <img src="img/logo.jpg" alt="" />
                </a>
              </div>
              <div class="col">
                <div class="header-search">
                  <form action="" class="search">
                    <input
                      type="text"
                      class="search-input"
                      placeholder="Поиск"
                    />
                  </form>
                </div>
              </div>
              <div class="col-auto">
                <div class="header-contacts">
                  <a href="tel:+74954249890">+7 (495) 424-98-90</a>
                  <a href="mailto:[email protected]">[email protected]</a>
                </div>
              </div>
              <div class="col-auto ms-auto ms-lg-0">
                <a href="#" class="btn btn-primary btn-get-a-call">
                  Заказать звонок
                </a>
              </div>
            </div>
          </div>
        </div>
        <div class="header-bottom">
          <div class="container">
            <div class="row">
              <div class="col">
                <div class="header-menu">
                  <ul class="header-menu-list">
                    <li>
                      <a href="#">Главная</a>
                    </li>
                    <li class="parent">
                      <a href="#">Каталог</a>
                    </li>
                    <li>
                      <a href="#">Доставка и оплата</a>
                    </li>
                    <li>
                      <a href="#">Информация</a>
                    </li>
                    <li>
                      <a href="#">Новости</a>
                    </li>
                    <li>
                      <a href="#">О нас</a>
                    </li>
                    <li>
                      <a href="#">Контакты</a>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
      </header>

.header {
  &-container {
    position: relative;
  }

  &-top {
    padding: 4px 0 3px 0;
    border-bottom: 1px solid var(--color-gray-300);
  }

  &-logo {
    display: block;
    width: 133px;
    height: 72px;

    img {
      width: 100%;
      height: 100%;
    }
  }

  &-contacts {
    display: flex;
    flex-direction: column;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;

    a {
      display: block;
      text-decoration: none;
      transition: all 0.3s;

      &:hover {
        color: var(--color-primary);
      }
    }
  }

  &-bottom {
    border-bottom: 1px solid var(--color-gray-300);
    position: sticky;
    top: 0;
    z-index: 10;
  }

  &-menu {
    &-list {
      margin: 0;
      padding: 0;
      list-style: none;
      display: flex;
      align-items: center;

      & > li {
        font-size: 14px;
        font-weight: 600;
        line-height: 20px;
        color: var(--color-gray-900);

        a {
          padding: 14px 0 13px 0;
          text-decoration: none;
          transition: all 0.3s;
          position: relative;
          display: inline-flex;
          align-items: center;

          &::before {
            content: '';
            position: absolute;
            left: 0;
            bottom: -1px;
            display: block;
            width: 100%;
            height: 2px;
            background-color: currentColor;
            transition: transform 0.4s cubic-bezier(0.7, 0, 0.2, 1);
            transform: scaleX(0);
            transform-origin: right center;
            transition-delay: 0s;
          }

          &:hover,
          &:focus {
            color: var(--color-primary);

            &::before {
              transform: scaleX(1);
              transform-origin: left center;
              transition-delay: 0.1s;
            }
          }
        }

        &.current {
          & > a {
            color: var(--color-primary);

            &::before {
              transform: scaleX(1);
              transform-origin: left center;
              transition-delay: 0.1s;
            }
          }
        }

        &.parent {
          & > a {
            display: inline-flex;
            align-items: center;

            &::after {
              content: '';
              margin-left: 12px;
              width: 10px;
              height: 7px;
              background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iNyIgdmlld0JveD0iMCAwIDEwIDciIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMC40MzQzMTEgMS41NjU3TDEuNTY1NjggMC40MzQzMjZMNSAzLjg2ODY0TDguNDM0MzEgMC40MzQzMjZMOS41NjU2OCAxLjU2NTdMNSA2LjEzMTM4TDAuNDM0MzExIDEuNTY1N1oiIGZpbGw9ImJsYWNrIi8+Cjwvc3ZnPgo=);
              transition: all 0.3s;
            }

            &::before {
              display: none;
            }
          }

          &:hover {
            & > a {
              color: var(--color-gray-900);

              &::after {
                background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iNyIgdmlld0JveD0iMCAwIDEwIDciIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMC40MzQzMTUgMS41NjU2OUwxLjU2NTY5IDAuNDM0MzE0TDUgMy44Njg2M0w4LjQzNDMxIDAuNDM0MzE0TDkuNTY1NjkgMS41NjU2OUw1IDYuMTMxMzdMMC40MzQzMTUgMS41NjU2OVoiIGZpbGw9IiMwNDQxRDQiLz4KPC9zdmc+Cg==);
                transform: rotate(180deg);
              }
            }
          }
        }

        &:not(:last-child) {
          margin-right: 48px;
        }

        &:last-child {
          margin-left: auto;
        }
      }
    }
  }
}