ロゴ画像を表示したままサイドメニューを表示、非表示にしたい

.sidelogoを表示したまま#label1をクリックするとサイドメニューが表示、非表示になるようにしたいのですが今のままだとクリックしてもサイドメニューが表示されません。HTMLの.sidelogoを.side-containerから外し、：notを消せばいいのですが画面が大きくなると元々の表示位置からズレてしまします。ご教授いただけますでしょうか。

HTML
1<div class="wrappir">
2  	
3  	   <div class="sidebar">
4        <label for="label1"> <i class="fas fa-bars"></i></label>
5     	<input type="checkbox" id="label1" class="csc"/>
6
7  		<div class="side-container">
8<!--ここから非表示-->
9        
10       　 <img class="sidelogo" src="logo.png" alt="店名">
11       
12  		 
13  		  <ul>
14  		   <li><a href="#">TOP</a></li>
15  		   <li><a href="#">MESSAGE</a></li>
16  		   <li><a href="#">GALLERY</a></li>
17  		   <li><a href="#">BRAND</a></li>
18  		   <li><a href="#">PROJECT</a></li>
19  		   <li><a href="#">COMPANY</a></li>
20  		  </ul>
21  		<div class="side-icon">
22  			<a href="#"><i class="fab fa-facebook-square"></i></a>
23  			<a href="#"><i class="fab fa-twitter-square"></i></a>
24  			<a href="#"><i class="fab fa-instagram-square"></i></a>
25  			<a href="#"><i class="fab fa-youtube-square"></i></a>
26  		</div>
27      </div>
28     
29  	 </div>
30  </div>

CSS
1@media screen and (max-width: 900px) {
2    .sidelogo {
3       position: fixed;
4       top: 0;
5       left: 50%;
6       min-height: 25px;
7       min-width: auto;
8    }
9    
10  
11    .sidebar label {
12       float:  right; 
13       font-weight: bold;
14       cursor :pointer;
15       background-color: pink;
16       display: block;
17       font-size: 20px;
18       padding-top: 15px;
19       padding-right: 20px;
20    }
21
22/*チェックは見えなくする*/
23      #label1{
24       display: none;
25    }
26
27/*ロゴ以外の中身を非表示にしておく*/
28    .side-container *:not(.sidelogo){
29       height: 0;
30       padding: 0;
31       overflow: hidden;
32       opacity: 0;
33       transition: 0.8s;
34    }
35
36/*クリックして表示*/
37    #label1:checked ~ .side-container {
38    padding: 5px;
39    height: auto;
40    opacity: 1;
41    display: block;
42　　}
43}

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

回答1件

以前の回答と同様に、.sidelogo を.side-containerの前に出せばいいのでは。position: fixed;で固定表示しているのでどこに置いても表示上は同じです。

html
1<div class="wrapper">
2
3  <div class="sidebar">
4    <label for="label1"> <i class="fas fa-bars"></i></label>
5    <input type="checkbox" id="label1" class="csc" />
6    <img class="sidelogo" src="logo.png" alt="店名">
7
8    <div class="side-container">
9      <!--ここから非表示-->
10      <ul>
11        <li><a href="#">TOP</a></li>
12        <li><a href="#">MESSAGE</a></li>
13        <li><a href="#">GALLERY</a></li>
14        <li><a href="#">BRAND</a></li>
15        <li><a href="#">PROJECT</a></li>
16        <li><a href="#">COMPANY</a></li>
17      </ul>
18      <div class="side-icon">
19        <a href="#"><i class="fab fa-facebook-square"></i></a>
20        <a href="#"><i class="fab fa-twitter-square"></i></a>
21        <a href="#"><i class="fab fa-instagram-square"></i></a>
22        <a href="#"><i class="fab fa-youtube-square"></i></a>
23      </div>
24    </div>
25  </div>
26</div>

こうすれば、CSSの *:not(.sidelogo) も不要になります。

css
1@media screen and (max-width: 900px) {
2  .sidelogo {
3    position: fixed;
4    top: 0;
5    left: 50%;
6    min-height: 25px;
7    min-width: auto;
8  }
9  .sidebar label {
10    float: right;
11    font-weight: bold;
12    cursor: pointer;
13    background-color: pink;
14    display: block;
15    font-size: 20px;
16    padding-top: 15px;
17    padding-right: 20px;
18  }
19  /*チェックは見えなくする */
20  #label1 {
21    display: none;
22  }
23  /*ロゴ以外の中身を非表示にしておく*/
24  .side-container {
25    height: 0;
26    padding: 0;
27    overflow: hidden;
28    opacity: 0;
29    transition: 0.8s;
30  }
31  /*クリックして表示*/
32  #label1:checked ~ .side-container {
33    padding: 5px;
34    height: auto;
35    opacity: 1;
36    display: block;
37  }
38}