.title-bar {
  position: relative;
  z-index: $z-indexFixedHeader;
  padding: $baseUnit/1.75;
  background-color: $colorMain;
  transition: .3s;
  transition-delay: .6s;
  &__left,
  &__right {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }

  // inner div to make sure title doesnt clash
  // with absolute positioned divs (left/right)
  &__inner {
    margin: 0 $baseUnit*1.25 + $bodyBorderWidth;
  }

  &__left {
    left: $baseUnit/2 + $bodyBorderWidth;
  }

  &__right {
    right: $baseUnit/2 + $bodyBorderWidth;
  }
}

.title-bar--spaced {
  padding: ceil($baseUnit*1.25);
}

.title-bar--hidden {
  transition-delay: 0s;
  transform: translateY(-100%);
}

.title-bar {
  position: relative;
  z-index: $z-indexFixedHeader;
  padding: $baseUnit/1.75;
  background-color: $colorMain;
  transition: .3s;
  transition-delay: .6s;
  &__left,
  &__right {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }

  // inner div to make sure title doesnt clash
  // with absolute positioned divs (left/right)
  &__inner {
    margin: 0 ceil($baseUnit*1.25 + $bodyBorderWidth);
    @include media(max-width $breakLaptop - 1) {
      margin: 0 ceil($baseUnit/1.5 + $bodyBorderWidth);
    }
  }

  &__left {
    left: $baseUnit/2 + $bodyBorderWidth;
    @include media(max-width $breakLaptop - 1) {
      left: $bodyBorderWidth;
    }
  }

  &__right {
    right: $baseUnit/2 + $bodyBorderWidth;
    @include media(max-width $breakLaptop - 1) {
      right: $bodyBorderWidth;
    }
  }
}

.title-bar--spaced {
  padding: ceil($baseUnit*1.25);
}

.title-bar--hidden {
  transition-delay: 0s;
  transform: translateY(-100%);
}

Adjust title-bar for smaller devices
Adjust title-bar for smaller devices
