:local(.styles) {
  position: fixed;
  z-index: 1;

  width: 100%;

  padding: 20px 0;
  
  opacity: 1;

  background: rgba(0, 0, 0, .8);

  a, a:hover {
    color: #FFF;
  }

  .logo {

    a {
      font-weight: bold;
    }
  }

  nav {

    a {
      margin-right: 20px;

      &.active {
        font-weight: bold;
      }
    }
  }
}

:local(.styles) {
  
  // position: fixed;
  z-index: 1;
  width: 100%;
  padding: 20px 0;
  opacity: 1;
  background: rgba(0, 0, 0, .8);

  a, a:hover {
    color: #FFF;
  }

  .logo {
    a {
      font-weight: bold;
    }
  }

  nav {

    a {
      margin-right: 20px;

      &.active {
        font-weight: bold;
      }
    }
  }

  @media only screen and (min-width : 768px) {
    position: fixed;
  }
}

Change to only be fixed when screen is large
Change to only be fixed when screen is large
