navigatorメニューを右に付けたい

↓クリックすると270px分横方向にスライドでnavigatorメニューが見える

手本見ずに１から作ってみました。navigatorが右の方に表示されません...
今の状態から右にメニューを付けたいです。クラス名やid名は自分でつけました。
他に指摘ありましたら、良ければ教えて下さい

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
7  <title></title>
8  <link rel="stylesheet" href="special.css">
9</head>
10<body>
11  <div id="wrapper">
12    <div class="header move">
13      <div class ="hamburger">
14        <img src="book-js/6-02_drawer/step1/hamburger.png" alt="">
15      </div>
16      <div class="key">
17        <img src="book-js/6-02_drawer/step1/key.jpg">
18      </div>
19    </div>
20  
21    <div class="wrapper move">
22      <h2>一人旅でリフレッシュ</h2>
23      <p>今月の特集は「一人旅」。<br>週末に行く小さな旅行から人生をみつめる長旅まで、<br>充実のおひとり様プラン、紹介します。</p>
24    </div>
25    <div class="navigator move">
26      <div class="logo"><img src="book-js/6-02_drawer/step1/logo.svg" alt=""></div>
27      <ul>
28        <li><a href="#">HOME</a></li>
29        <li><a href="#">今月の特集</a></li>
30        <li><a href="#">ホテル検索</a></li>
31        <li><a href="#">カフェ検索</a></li>
32        <li><a href="#">お問い合わせ</a></li>
33      </ul>
34    </div>
35
36  </div>
37    <script src="jquery-3.4.1.min.js"></script>
38    <script src="main.js"></script>
39</body>
40</html>

css
1@charset "UTF-8";
2.header{
3    position:relative;
4    
5    
6}
7.key img{
8    height:600px;
9    width:100%;
10}
11.hamburger img {
12    position:absolute;
13    top:50px;
14    right:50px;
15}
16.wrapper h2,p {
17    text-align:center;
18}
19
20
21.navigator {
22    width:270px;
23    background-color:rgba(19, 16, 16, 0.267);
24    height:100%;
25    padding:20px 20px;
26    position:fixed;
27    right:-270px;
28
29}
30.logo {
31    margin-bottom:10px;
32}
33ul {
34    padding:0;
35    margin:0;
36
37}
38ul >li{
39    list-style:none;
40    padding:20px 0;
41    border-bottom:0.5px solid #3333;
42
43}
44ul >li>a {
45    text-decoration:none;
46    color:#fff;
47}
48.active {
49    transform:translate3d(-270px,0,0);
50}

javascript
1// main.js
2'use strict';
3
4{ 
5  $(document).ready(function() {
6    $('.hamburger').on('click', function() {
7      $('.move').toggleClass('active');
8    });
9
10  });
11
12}

行動規範の内容に同意します

回答1件

ベストアンサー

下記でどうでしょう。
fixed にしたときは、top か bottom を指定しないと、本来の位置のまま（wrapper の後）ですので、画面外に出てしまいます。

css
1.navigator {
2    width:270px;
3    background-color:rgba(19, 16, 16, 0.267);
4    height:100%;
5    padding:20px 20px;
6    position:fixed;
7    right:-310px; /* 修正 */
8    top: 0;  /* 追加 */
9}
10