.nav-toggler {
  position: relative;

  .toggle-icon {
    width: 1em;
    position: relative;
    display: inline-block;
    vertical-align: text-bottom;
    transform: translateX(-50%) translateY(-.5em);
  }

  .bar {
    border-color: $navbar-light-hover-color;
    height: 0;
    border-width: 1px;
    border-style: solid;
    display: block;
    position: absolute;
    transition: all $nav-animation-duration $nav-animation-easing;

    &:nth-child(1) {
      top: -.4em;
      width: 1.9em;
    }

    &:nth-child(2) {
      top: 0;
      width: 1.2em;
    }

    &:nth-child(3) {
      top: .4em;
      width: 1.5em;
    }
  }

  &.collapsed .bar {


    &:nth-child(1) {

      width: 2em;
    }

    &:nth-child(2) {

      width: 2em;
    }

    &:nth-child(3) {

      width: 2em;
    }
  }

  &:focus {
    outline: 0;

  }
}


