NavBar.vue

<template>
  <div>
    <b-navbar toggleable="sm" type="dark" variant="" fixed="top">
      <b-navbar-brand>
        <router-link to="/" class="home-link">
          <YodaLogo />
        </router-link>
      </b-navbar-brand>
      <b-navbar-toggle target="navbar-toggle-collapse">
        <template v-slot:default="{ expanded }">
          <b-icon v-if="expanded" icon="chevron-bar-up"></b-icon>
          <b-icon v-else icon="chevron-bar-down"></b-icon>
        </template>
      </b-navbar-toggle>

      <b-collapse id="navbar-toggle-collapse" is-nav>
        <b-navbar-nav class="ml-auto">
          <router-link class="nav-item" to="/services">
            SERVICES
          </router-link>
          <router-link class="nav-item" to="/who-we-are">
            WHO WE ARE
          </router-link>
        </b-navbar-nav>
      </b-collapse>
    </b-navbar>
  </div>
</template>
<script>
import YodaLogo from "@/assets/images/icons/Logo_P1_Yoda_Campfire-WH.svg";
export default {
  name: "NavBar",
  components: {
    YodaLogo
  }
};
</script>
<style lang="scss" scoped>
.navbar {
  background-color: $secondary-bg-color;
  margin-left: auto;
  margin-right: auto;

  .navbar-toggler {
    outline: none;
  }
  .navbar-collapse {
    &.collapse.show,
    &.collapse.collapsing {
      .nav-item {
        margin: 0.5rem auto !important;
      }
    }
  }

  .navbar-nav {
    margin-right: 6rem;
    font-weight: 600;

    .nav-item {
      padding: 0.5rem;
      margin: 0 1rem;
      width: 130px;
      letter-spacing: 0.02rem;
      color: $secondary-text-color;
      border-top: 2px solid transparent;
      border-bottom: 2px solid transparent;
    }

    .router-link-exact-active {
      border-bottom: 2px solid $p1-light-green;
      color: $p1-light-green;
    }

    .nav-item:last-child {
      margin-right: 0;
    }
  }

  .home-link {
    font-family: "Anton", sans-serif;
    font-size: 2.1rem;
    color: $secondary-text-color;
    margin-left: 6rem;
    border-bottom: none;
    // vertically center text
    top: -3px;
    position: relative;
  }

  @include media-breakpoint-down(sm) {
    .home-link {
      margin-left: 1rem;
    }
    .navbar-nav {
      margin-right: 1rem;
    }
  }
  @include media-breakpoint-only(md) {
    .home-link {
      margin-left: 2rem;
    }
    .navbar-nav {
      margin-right: 2rem;
    }
  }

  .navbar-brand {
    text-transform: uppercase;
    font-weight: 500;
    font-size: 3rem;

    img {
      width: 70px;
    }

    .small-text {
      font-size: 1rem;
    }

    .navbar-title {
      line-height: 1;
    }
  }
}
</style>