.directive.dna-navigation {
  -webkit-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;
  position: fixed;
  width: 100%;
  z-index: 999;
  left: 0;
  .dna-nav-holder {
    -webkit-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
    padding: 30px 20px 30px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    img.logo {
      border-radius: 4px;
    }
    a {
      color: darken($light, 5%);
    }
  }
  ul.nav {
    .nav-link {}
  }
}

.directive.dna-navigation.fixed {
  position: fixed;
  background-color: $primary-color;
  z-index: 999;
  width: 100%;
  left: 0;
  .dna-nav-holder {
    padding: 20px 20px 20px 20px;
    border-bottom: 1px transparent solid;
  }
}