/* ===== Desktop navbar (120px height) ===== */
.custom-navbar {
  height: 120px;
  background: #000;
  border: none;
  margin-bottom: 0;
}

.custom-navbar .navbar-header,
.custom-navbar .navbar-collapse {
  height: 120px;
}

/* Vertically center links */
.custom-navbar .nav > li > a {
  color: #fff;
  line-height: 120px;
  padding-top: 0;
  padding-bottom: 0;
  transition: color 0.2s ease;
}

/* Hover + active = red */
.custom-navbar .nav > li > a:hover,
.custom-navbar .nav > li > a:focus {
  color: red;
  background: transparent;
}

.custom-navbar .nav > .active > a,
.custom-navbar .nav > .active > a:hover,
.custom-navbar .nav > .active > a:focus {
  color: red;
  background: transparent;
}

/* Brand alignment */
.custom-navbar .navbar-brand {
  height: 120px;
  line-height: 120px;
  color: #fff;
}

/* ===== Mobile (Bootstrap 3 < 768px) ===== */
@media (max-width: 767px) {

  .custom-navbar {
    height: 60px;
  }

  .custom-navbar .navbar-header {
    height: 60px;
  }

  .custom-navbar .navbar-toggle {
    margin-top: 13px;
    margin-bottom: 13px;
  }

  .custom-navbar .navbar-collapse {
    background: #000;
  }

  .custom-navbar .nav > li > a {
    line-height: 40px;
    color: #fff;
  }

}