HTMLは divの閉じタグがないのはコピーできていないだけとして、
CSSで下記が間違っているで修正してください。
2行目
float: ; right:
↓
float: right;
最終行
}
↓ 全角空白を削除
}
で、これでもラベルは表示されません。
下記のCSSで .side-container
の.sidelogo
以外の子孫要素をすべて非表示にしているので。
css
1 .side-container *:not(.sidelogo){
2 height: 0;
3 padding: 0;
4 overflow: hidden;
5 opacity: 0;
6 transition: 0.8s;
7 }
これを削除すればラベルは表示されます。
(Font Awesomeへのリンクができていればですが)
追記
ラベル(ハンバーガー)をクリックしたら、
.side-container内にあるメニュー(リスト)を表示させたり、非表示にしたりしたいのだとしたら、
HTMLで label
input
を.side-container
の外に出せばいいでしょう。
html
1<div class="wrappir">
2 <div class="sidebar">
3 <label for="label1"> <i class="fas fa-bars"></i></label>
4 <input type="checkbox" id="label1" class="csc"/>
5 <div class="side-container">
6<!--ここから非表示-->
7
8<!--メニューリスト-->
9
10 </div>
11 </div>
12</div>
さらに追記
たぶんやりたいことは下記のようなことでしょうか。
html
1<div class="wrappir">
2 <div class="sidebar">
3 <label for="label1"> <i class="fas fa-bars"></i></label>
4 <input type="checkbox" id="label1" class="csc" />
5 <div class="side-container">
6 <ul>
7 <li><a>menu1</a></li>
8 <li><a>menu2</a></li>
9 <li><a>menu3</a></li>
10 <li><a>menu4</a></li>
11 </ul>
12 </div>
13 </div>
14</div>
css
1.sidebar label {
2 float: right;
3 font-weight: bold;
4 cursor :pointer;
5 background-color: pink;
6 display: block;
7 font-size: 20px;
8}
9
10.side-container {
11 height: 0;
12 padding: 0;
13 overflow: hidden;
14 opacity: 0;
15 transition: 0.8s;
16}
17
18#label1{
19 display: none;
20}
21
22#label1:checked ~ .side-container {
23 height: auto;
24 opacity: 1;
25 display: block;
26}
CodePenサンプル