Cacher is the code snippet organizer for pro developers

section.navbar {
  @extend .flex;
  @extend .flex--wrap;
  background: #F4F7FB url('../img/icons/icon_navbar-play.svg') no-repeat 80% 90%;
  background-size: 200px 200px;
  margin: 0;
  border: none;
  
  .container-fluid {
    @extend .flex;
    @extend .flex--wrap;
    @extend .flex--center;
    @extend .container;
    padding-top: 40px;
    padding-bottom: 25px;
    @media (max-width: 1199px) {
      padding-left: 40px;
      padding-right: 40px;
    }
  }

  a {
    @extend .transition-basic;
    text-decoration: none;
    color: $primary-color;
    &:hover {
      color: $orange;
    }
  }

  .logo {
    height: 50px;
  }
  
  ul {
    @extend .flex;
    li {
      @extend .flex;
      position: relative;
      margin: 0 15px;
      &:first-child {
        margin: 0;
      }
      &:nth-child(2) {
        p {
          padding-left: 30px;
          border-left: solid 1px $primary-color;
        }
      }
      &:last-child {
        margin-right: 0;
      }
      &:not(:first-child) {
        @media (max-width: 991px) {
          display: none;
        }
      }
      p {
        @extend .flex--center;
      }
    }
  }
  

  p {
    font-size: 1.3rem;
    font-weight: 300;
    line-height: 1.25;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  
}

.hamburger {
  @extend .transition-basic;
  outline: none;
  margin-left: auto;

  .hamburger-box {
    @extend .transition-basic;
    .hamburger-inner, 
    .hamburger-inner::before, 
    .hamburger-inner::after {
      @extend .transition-basic;
      border-radius: 0;
      height: 3px;
      background: $primary-color;
    }
  }

  &:hover {
    .hamburger-inner, 
    .hamburger-inner::before, 
    .hamburger-inner::after {
      @extend .transition-basic;
    }
  }
}

section.navbar-dropdown {
    background: $primary-color;
    display: none;
    color: white;
    position: absolute;
    z-index: 5;
    width: 100%;
    ul {
        width: 100%;
    }
    li:not(:last-child) {
        p {
            border-bottom: solid 1px lighten($primary-color, 8%);
        }
    }
    p {
        font-size: 1.3rem;
        font-weight: 300;
        line-height: 1.25;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    a {
        @extend .transition-basic;
        width: 100%;
        padding: 10px 20px;
        display: block;
        text-decoration: none;
        color: white;
        &:hover {
            background: $blue;
            color: white;
        }
    }
}

<section class="navbar">
  <div class="container-fluid">
    <ul class="list-inline">
      <li>
        <img class="logo" src="assets/build/img/logos/logo_harqen.png" alt="HarQen logo">
      </li>
      <li>
        <p><a href="">Cool <br>Technology</a></p>
      </li>
      <li>
        <p><a href="">Candidate <br>Solutions</a></p>
      </li>
      <li>
        <p><a href="">Amazing <br>Support</a></p>
      </li>
      <li>
        <p><a href="">See Our <br>Demonsatration</a></p>
      </li>
    </ul>
    <!-- Mobile Menu Button -->
    <button class="hamburger hamburger--spin visible-sm visible-xs" id="mMenu" type="button">
      <span class="hamburger-box">
        <span class="hamburger-inner"></span>
      </span>
    </button>
  </div>
</section>

<!-- Mobile Navbar Dropdown -->
<section class="navbar-dropdown" id="mDropdown">
  <ul>
    <li>
      <p><a href="">Cool Technology</a></p>
    </li>
    <li>
      <p><a href="">Candidate Solutions</a></p>
    </li>
    <li>
      <p><a href="">Amazing Support</a></p>
    </li>
    <li>
      <p><a href="">See Our Demonsatration</a></p>
    </li>
  </ul>
</section>

/* Navbar (Mobile)
------------------------------------------------------------------------------*/
$('#mMenu').click(function() {
    $(this).toggleClass('is-active');
    $('#mDropdown').slideToggle();
});