.navbar-static-top ~ #main {
  top: $navbar-height !important;
}

.navbar-static-top ~ .nav-menu {
  top: $navbar-height;
}

.nav-menu {
  width: $navbar-fixed-width;
  position: fixed;
  top: 0;
  bottom: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;

  ~ #main {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
  }

  .nav-menu-header {

    .nav-menu-brand {
      display: block;
      padding: 10px 15px;
      text-decoration: none;
      font-size: 18px;
    }
  }

  &.nav-menu-fixed-left {
    right: auto;
    left: 0;

    ~ #main {
      right: 0;
      left: $navbar-fixed-width;
    }
  }

  &.nav-menu-fixed-right {
    left: auto;
    right: 0;

    ~ #main {
      left: 0;
      right: $navbar-fixed-width;
    }
  }

  &.nav-menu-default {
    background: $navbar-default-bg;
    color: $navbar-default-color;

    .nav-menu-header {
      .nav-menu-brand {
        color: $navbar-default-brand-color;

        &:hover {
          color: $navbar-default-brand-hover-color;
          background-color: $navbar-default-brand-hover-bg;
        }
      }
    }

    .nav-menu-nav {
      li {
        a {
          color: $navbar-default-link-color;

          &:hover {
            color: $navbar-default-link-hover-color;
            background-color: $navbar-default-link-hover-bg;
          }
        }

        &.active {
          a {
            color: $navbar-default-link-active-color;
            background-color: $navbar-default-link-active-bg;
          }
        }
      }
    }
  }

  &.nav-menu-inverse {
    background: $navbar-inverse-bg;
    color: $navbar-inverse-color;

    .nav-menu-header {
      .nav-menu-brand {
        color: $navbar-inverse-brand-color;

        &:hover {
          color: $navbar-inverse-brand-hover-color;
          background-color: $navbar-inverse-brand-hover-bg;
        }
      }
    }

    .nav-menu-nav {
      li {
        a {
          color: $navbar-inverse-link-color;

          &:hover {
            color: $navbar-inverse-link-hover-color;
            background-color: $navbar-inverse-link-hover-bg;
          }
        }

        &.active {
          a {
            color: $navbar-inverse-link-active-color;
            background-color: $navbar-inverse-link-active-bg;
          }
        }
      }
    }
  }
}