サンプル 

サンプルデモはこちら

サンプルではFontAwesomeのアイコンフォントを使っています。

HTML

  <div class="document-wrap">
    <nav class="width-fixed-nav">
      <input type="checkbox" id="nav-toggle" class="nav-toggle-selecter">
      <ul class="nav-list">
        <li><a href="">HOME</a></li>
        <li><a href="">INFORMATION</a></li>
        <li><a href="">PRODUCTS</a></li>
        <li><a href="">ABOUT</a></li>
        <li><a href="">INQUIRY</a></li>
      </ul>
      <label for="nav-toggle" class="nav-toggle-button"></label>
    </nav><!-- /.width-fixed-nav -->

    <div class="contents-wrap">
      <header>
        <h1>横幅固定レスポンシブナビ</h1>
      </header>

      <main>
        <article>
          <p>コンテンツの内容が入ります。これはダミーテキストです。</p>
        </article>
      </main>

      <footer>
        <p><small>Copyright &copy; expexp.jp All Rights Reserved.</small></p>
      </footer>
    </div><!-- /.contents-wrap -->
  </div><!-- /.document-wrap -->

SASS

/*---------------------------------------------
  General Settings
  ---------------------------------------------*/
$tablet-size: 768px;


/*---------------------------------------------
  Width fixed nav
  ---------------------------------------------*/
.document-wrap {
  padding: 10px 1em;
  @media (min-width: $tablet-size) {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: 0;
  }
}

@media (min-width: $tablet-size) {
  .contents-wrap {
    width: calc( 100% - 240px);
    box-sizing: border-box;
    padding: 10px 1em;
  }
}

.width-fixed-nav {
  text-align: right;
  @media (min-width: $tablet-size) {
    width: 240px;
    min-height: 100vh;
    background: rgba(#313131, 1);
    text-align: left;
  }
}

.nav-list {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100vh;
  box-sizing: border-box;
  list-style: none;
  margin: 0;
  padding: 60px 0 30px;
  background: rgba(black, .95);
  @media (min-width: $tablet-size) {
    display: block;
    position: static;
    width: auto;
    height: auto;
    padding: 10px 1em;
    background: none;
  }
  > li {
    a {
      display: block;
      padding: 10px 1em;
      text-decoration: none;
      color: rgba(white, 1);
    }
  }
}

.nav-toggle-button {
  cursor: pointer;
  &::before {
    font-family: 'FontAwesome';
    content: '\f0c9';
  }
  @media (min-width: $tablet-size) {
    display: none;
  }
}

.nav-toggle-selecter {
  display: none;
  &:checked {
    + .nav-list {
      display: block;
      + .nav-toggle-button::before {
        position: relative;
        z-index: 2;
        color: rgba(white, 1);
        content: '\f00d';
      }
    }
  }
}