.navbar-inverse .navbar-toggle,
.navbar-inverse .navbar-toggle:hover,
.navbar-inverse .navbar-toggle:focus {
  background-color: transparent;
  border-color: transparent !important;
}

#header-nav {
  background: $mainBrandColor linear-gradient(to right, $mainBrandColor, $secondBrandColor) no-repeat center/cover;

  padding-top: 10px;
  padding-bottom: 10px;
}

@mixin underline() {
  &:after{
    background: $white;
    bottom: 8px;
    content: "";
    height: 2px;
    left: $spacing--xs;
    margin: auto;
    position: absolute;
    right: $spacing--xs;
  }
}

.brand-name {
  color: $white;
  font-weight: 300;
  font-size: 1.7em;
  vertical-align: bottom;
}

.navbar-brand {
  padding: inherit;
  line-height: inherit;
  height: inherit;

  img {
    height: 3em;
  }
}  

.navbar-header {
  margin-top: 15px;
  margin-left: 15px;
}

.nav>li>a.current {
  @include underline()
}

.nav li a:active, .nav li a:focus, .nav li a:hover {
  border-bottom: 0;
}

.navbar {
  margin-bottom: 0;
  border: none;
  border-radius: 0;
}

.navbar-inverse .navbar-nav>li>a {
    color: $white;
}

.navbar-inverse .navbar-nav>li>a:hover {
    @include underline();
}

.main-nav-dropdown>li>a:hover {
  background-color: $white;
  color: $secondBrandColor;
  font-weight: bold;
}

.navbar-inverse .navbar-nav>.open>a, 
.navbar-inverse .navbar-nav>.open>a:hover, 
.navbar-inverse .navbar-nav>.open>a:focus {
  color: #fff !important;
  background-color: $thirdBrandColor;
}