/* =Navigation Responsive
-----------------------------------------------------------------------------*/
@media only screen and (max-width: 767px) {

  .navbar {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;

    // Hide scrollbar
    scrollbar-width: none;
    &::-webkit-scrollbar {
      display: none;
    }

    // Legacy float resets
    &.navbar-left,
    &.navbar-right,
    & li,
    &.navbar-left li,
    &.navbar-right li {
      float: none;
      text-align: left;
      width: auto;
    }

    li {
      margin-left: 0;
      margin-right: 0;
    }

    // Vertical navbar: stack normally, no scroll
    &.navbar-vertical,
    &.navbar--vertical {
      overflow-x: visible;
      overflow-y: visible;
    }

    // Opt-in stacking behavior
    &.navbar-stack,
    &.navbar--stack {
      overflow-x: visible;

      > ul {
        flex-wrap: wrap;
      }

      a, > span {
        white-space: normal;
      }
    }
  }

  .fullwidth {
    & ul,
    & li {
      width: auto;
    }
    & li {
      display: block;
    }
  }
}