ハンバーガメニューの✖印を隠れずに、表示させたい

前提・実現したいこと

ハンバーガメニューの✖印が画像のように、隠れずに、表示させたい
liを中央揃えにしたい

2点です。よろしくお願いいたします。

発生している問題・エラーメッセージ

×しるしが右に寄ってしまう

追記

試したこと

1上記の画像のように、×印が半分隠れてしまうため
大きさが大きいと思い,
width.heightの大きさを変更→解決しない
buttonに余白を持たせようと思い、right: 20px;→解決しない。

検索で「×しるしが右に寄ってしまうHTML」などで検索→解決しない。
2.li,aタグにtext-aligen:center;やmargin0 auto;を書いたが、解決できずにいます

該当のソースコード

HTML
1 <header class="header">
2        <div class="inner header-inner">
3            <h1 class="header-ttl">
4                <img class="img-logo" src="./image/Logo.png" alt="">
5                <p class="logo-text">ユアコーディング</p>
6            </h1><!-- /.header-ttl -->
7            
8            <nav class="nav" id="js-nav">
9                <ul class="header-list">
10                    <li class="header-item"><a href="#feauture">特徴</a></li><!-- /.header-item -->
11                    <li class="header-item"><a href="#price">価格</a></li><!-- /.header-item -->
12                    <li class="header-item"><a href="#contact-link">問い合わせ</a></li><!-- /.header-item -->
13                </ul><!-- /.header-list -->
14            </nav><!-- /.nav -->
15            <div class="header-link cmn-link">
16               <a id="js-hum" href="#contact-link">お問い合わせ</a>
17            </div><!-- /.cmn-link -->
18            
19            <button type="button" id="js-humburger" class="button humburger" aria-controls="js-glabal-menu" aria-expanded="false" area-label="メニューを開閉する">
20                <span class="line"></span ><span class="line"></span><span class="line"></span>
21              </button>
22        </div><!-- /.inner -->
23    </header><!-- /.header -->
24

CSS
1.header {
2  background-color: #FFFFFF;
3  height: 94px;
4  position: fixed;
5  top: 0;
6  z-index: 9999;
7  width: 100%;
8  -webkit-box-shadow: 0px 3px 6px #00000029;
9          box-shadow: 0px 3px 6px #00000029;
10}
11
12.header .header-inner {
13  max-width: 1022px;
14  margin: 0 auto;
15  padding: 0 20px;
16  display: -webkit-box;
17  display: -webkit-flex;
18  display: -ms-flexbox;
19  display: flex;
20  -webkit-box-align: center;
21  -webkit-align-items: center;
22      -ms-flex-align: center;
23          align-items: center;
24  -webkit-box-pack: justify;
25  -webkit-justify-content: space-between;
26      -ms-flex-pack: justify;
27          justify-content: space-between;
28  height: 100%;
29}
30
31.header .header-inner .header-ttl {
32  display: -webkit-box;
33  display: -webkit-flex;
34  display: -ms-flexbox;
35  display: flex;
36  -webkit-box-align: center;
37  -webkit-align-items: center;
38      -ms-flex-align: center;
39          align-items: center;
40}
41
42.header .header-inner .header-ttl .img-logo {
43  width: 55px;
44  height: 55px;
45}
46
47.header .header-inner .header-ttl .logo-text {
48  display: block;
49  font-size: 2.4rem;
50  font-weight: bold;
51  margin-left: 16px;
52}
53
54@media screen and (max-width: 1200px) {
55  .header .header-inner .nav._open {
56    position: fixed;
57    left: 0;
58    top: 0;
59    width: 100%;
60    background-color: #efefef;
61    opacity: 0.1;
62    padding-top: 145px;
63    z-index: 1;
64    opacity: 0;
65    visibility: hidden;
66    -webkit-transition: opacity 0.3s ease;
67    transition: opacity 0.3s ease;
68    opacity: 1;
69    visibility: visible;
70    transition: opacity 0.3s ease;
71    padding: 20px;
72  }
73}
74
75.header .header-inner .header-list {
76  display: -webkit-box;
77  display: -webkit-flex;
78  display: -ms-flexbox;
79  display: flex;
80  -webkit-box-pack: justify;
81  -webkit-justify-content: space-between;
82      -ms-flex-pack: justify;
83          justify-content: space-between;
84  -webkit-box-align: center;
85  -webkit-align-items: center;
86      -ms-flex-align: center;
87          align-items: center;
88}
89
90@media screen and (max-width: 1200px) {
91  .header .header-inner .header-list {
92    display: none;
93  }
94}
95
96.header .header-inner .header-list._active {
97  display: -webkit-box;
98  display: -webkit-flex;
99  display: -ms-flexbox;
100  display: flex;
101  -webkit-box-orient: vertical;
102  -webkit-box-direction: normal;
103  -webkit-flex-direction: column;
104      -ms-flex-direction: column;
105          flex-direction: column;
106  text-align: center;
107}
108
109.header .header-inner .header-list .header-item > a {
110  font-weight: bold;
111}
112
113.header .header-inner .header-list .header-item > a._active {
114  font-size: 3.0rem;
115  text-align: center;
116}
117
118.header .header-inner .header-list .header-item + .header-item {
119  padding-left: 46px;
120}
121
122.header .header-link {
123  width: 155px;
124  height: 37px;
125}
126
127@media screen and (max-width: 769px) {
128  .header .header-link {
129    display: none;
130  }
131}
132
133@media screen and (max-width: 1200px) {
134  .header .header-link {
135    display: none;
136  }
137}
138
139.header .header-link > a {
140  color: #fff;
141  font-size: 1.4rem;
142  text-align: center;
143}
144
145@media screen and (max-width: 1200px) {
146  .humburger {
147    display: block;
148    height: 80px;
149    width: 80px;
150    position: fixed;
151    top: 0%;
152    right: 20px;
153    /* /*   position: fixed;
154        right: 20px;
155        z-index: 3; */
156    /*  width: 5%;
157        height: 5%; */
158    /* border: 1px solid #333;
159        box-shadow: 0 0 2rem transparent; */
160    z-index: 99;
161  }
162  .humburger._open {
163    right: 20px;
164  }
165}
166
167@media screen and (max-width: 1200px) and (max-width: 1200px) {
168  .humburger .line {
169    display: block;
170    height: 1px;
171    width: 50px;
172    background-color: #333;
173    position: absolute;
174    top: 50%;
175    left: calc(50% - 25px);
176    /* 左右中央 */
177    -webkit-transition: .3s;
178    transition: .3s;
179    -webkit-transform-origin: center;
180            transform-origin: center;
181    /* 回転の軸を中央にする */
182  }
183  .humburger .line:first-child {
184    top: calc(50% + 5px);
185  }
186  .humburger .line:nth-child(2) {
187    top: calc(50% + 10px);
188    bottom: 0;
189    margin: auto;
190  }
191  .humburger .line:last-child {
192    top: calc(50% + 15px);
193  }
194  .humburger .line._open:first-child {
195    display: block;
196    -webkit-transform: rotate(-45deg);
197            transform: rotate(-45deg);
198    color: #000;
199  }
200  .humburger .line._open:nth-child(2)._open {
201    opacity: 0;
202  }
203  .humburger .line._open:last-child {
204    -webkit-transform: rotate(45deg);
205            transform: rotate(45deg);
206    top: 50%;
207    color: #000;
208  }
209}

SCSS
1
2.humburger{
3    
4    @include mt{
5        display: block;
6        height: 80px;
7        width: 80px;
8        position: fixed;
9        top: 0%;
10        right: 20px;
11      /* /*   position: fixed;
12        right: 20px;
13        z-index: 3; */
14       /*  width: 5%;
15        height: 5%; */
16        // border-radius: 50%;
17        /* border: 1px solid #333;
18        box-shadow: 0 0 2rem transparent; */  
19        z-index: 99;
20        &._open{
21            right: 20px;
22        }
23    
24        @include mt{
25            .line {
26                display: block;
27                height: 1px;
28                width: 50px;
29                background-color: #333;
30                position: absolute;
31                top: 50%;
32                left: calc(50% - 25px);   /* 左右中央 */
33                //transform: translate(-50%,-50%);
34                transition: .3s;
35                transform-origin: center; /* 回転の軸を中央にする */
36              
37                &:first-child {
38                   top: calc(50% + 5px);
39                }
40                &:nth-child(2) {
41                    top: calc(50% + 10px);
42                    bottom: 0;
43                    margin: auto; 
44                }
45                &:last-child {
46                    
47                   top: calc(50% + 15px);  
48                }
49                //js-open
50                &._open{
51                    &:first-child {
52                        display: block;
53                        transform: rotate(-45deg) ; 
54                        // transform-origin: left;
55                        color: #000;
56                        
57                        
58                    }
59                    &:nth-child(2){
60                        &._open{
61                            opacity: 0;
62                            }
63                    }
64 
65                    &:last-child {
66                        transform: rotate(45deg) ; 
67                        top: 50%;
68                        // transform-origin: left;
69                        color: #000;
70                        }
71                }
72            }
73        }
74    }
75} 
76   
77

js
1/* humberger */
2$(function(){
3  $("#js-humburger","body", ".nav").on('click', function(){
4   
5    $(this).toggleClass("_open");
6    $(".nav, .line").toggleClass("_open");
7    $(".header-list, .header-item, .header-item a").toggleClass("_active");
8    $("body").toggleClass("noscroll");
9    $(".this").fadeToggle(300);
10  
11  }); 
12
13});

何卒よろしくお願いいたします。

Lhankor_Mhy

2021/09/24 09:40

JavaScript がないと再現できないんじゃないでしょうか。

free_teku

2021/09/24 13:09

お待たせしました。jsを記載しました。よろしくお願いいたします。

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

回答1件

transform: translate(-50%, -50%); で中央寄せしていますが、これで位置調整すると、回転させて✖にしたときの位置調整が面倒なことになります。

transform は使わずに、top bottom left 等で位置調整したほうがシンプルです。

css
1@media screen and (max-width: 1200px) and (max-width: 1200px) {
2  .humburger .line {
3    display: block;
4    height: 1px;
5    width: 50px;
6    background-color: #333;
7    position: absolute;
8    top: 50%;                 /* 上下中央 */
9    left: calc(50% - 25px);   /* 左右中央 */
10    transition: .3s;
11    transform-origin: center; /* 回転の軸を中央にする */
12  }
13  .humburger .line:first-child {
14    top: calc(50% - 15px);
15  }
16  .humburger .line:last-child {
17    top: calc(50% + 15px);
18  }
19  .humburger .line._open:first-child {
20    top: 50%;
21    transform: rotate(45deg);
22  }
23  .humburger .line._open:nth-child(2)._open {
24    opacity: 0;
25  }
26  .humburger .line._open:last-child {
27    transform: rotate(-45deg);
28    top: 50%;
29  }
30}

投稿2021/09/24 13:46

総合スコア34075

2021/09/27 00:31

遅くなりました。ご回答ありがとうございます。以後、シンプルなハンバーガメニューを作れるようにtop.bottom.leftを使いながら、作ります一点質問です。添付したように、3本の幅が小さくなっています。それぞれの線にtop:calc() の15pxを変更しました。R：線が非表示になってしまったからです。恐れ入りますが、上記の画像の線の幅をもう少し広げるには、どこを調節すればよろしいでしょうか？ top:calc()のpxを調節しましたが、あまりうまくいきませんでした。また、✖印が斜めになってしまいます。こちらの原因についても教えていただけると幸いです。