@import '~bootstrap-sass/assets/stylesheets/bootstrap/_variables.scss';

.header {
  .navbar-header {
    display: flex;
    align-items: center;
  }

  .navbar-default {
    .navbar-nav {
      > li {
        > a {
          $strongBorderBottom: 3px solid #22b14c;
          $weakBorderBottom: 3px solid rgba(34, 177, 76, .3);

          &:hover,&.active {
            height: $navbar-height;
            background-color: rgba(34, 177, 76, .08);
            border-bottom: $strongBorderBottom;
            color: #333;
          }
          &:hover {
            border-bottom: $weakBorderBottom;
          }
          &:hover.active {
            border-bottom: $strongBorderBottom;
          }
        }
      }
    }
  }
}

@import '~bootstrap-sass/assets/stylesheets/bootstrap/_variables.scss';

.header {
  .navbar-header {
    display: flex;
    align-items: center;
  }

  .navbar-default {
    .navbar-nav {
      > li {
        > a {
          $strongBorderBottom: 3px solid #22b14c;
          $weakBorderBottom: 3px solid rgba(34, 177, 76, .3);

          &:hover,&.active {
            padding-bottom: 7px;
            @media only screen and (min-width: $screen-sm-min) {
              padding-bottom: $navbar-padding-vertical - 3;
            }
            background-color: rgba(34, 177, 76, .08);
            border-bottom: $strongBorderBottom;
            color: #333;
          }
          &:hover {
            border-bottom: $weakBorderBottom;
          }
          &:hover.active {
            border-bottom: $strongBorderBottom;
          }
        }
      }
    }
  }
}

Fix responsive active/hover menu heights
Fix responsive active/hover menu heights
