Buenas tardes, tengo un problema con mi Menu Responsive. Lo cree solo con CSS y HTML. El problema es que me funciona en la pc, cuando utilizo las herramientas de desarrollador y lo pruebo con la opcion de responsive en diferentes tamaños tambien funciona.

Mi problema, es que cuando lo subo al host, y lo pruebo desde el dispositivo movil, no me funciona. Me cambia el icono de hamburgesa al icono de cerrar, pero no me aparece nunca el menu.

1
2<input type="checkbox" id="res-menu">
3           <label for="res-menu">
4               <i class="fa fa-bars" id="sign-open"></i>
5               <i class="fa fa-times" id="sign-close"></i>
6           </label>
7

1
2/* NAV - HEADER */
3
4.header{
5   position: fixed;
6   top: 0;
7   display: flex;
8   justify-content: space-between;
9   align-items: center;
10   height: 120px;
11   width: 100%;
12   overflow: hidden;
13   background-color:rgb(255, 255, 255);
14   z-index: 1000;
15   border-bottom: 1px solid transparent;
16   box-shadow: 0 0 10px var(--second-color);
17   transition: height 1s,
18               font-size 1s;
19}
20
21.header .logo{
22   position: absolute;
23   height: auto;
24   display: flex;
25   width: 300px;
26   top: 50%;
27   left: 50%;
28   margin-top: -100px;
29   margin-left: -150px;
30   transition: width 1s,
31               margin 1s;
32
33}
34
35.nav{
36   position: relative;
37   width: 98%;
38   margin: auto;
39}
40
41label #sign-open,
42label #sign-close{
43       display: none;
44       font-size: 30px;
45       color: block;
46       line-height: 50px;
47       margin-right: 30px;
48       cursor: pointer;
49   }
50
51#res-menu{
52       display: none;
53   }
54
55.ul{
56   text-align: right;
57   float: none;
58   width: 90%;
59   margin: auto;
60   display: flex;
61   flex-direction: row;
62   justify-content: space-between;
63   text-align: center;
64}
65
66[@media](https://ed.team/media) screen and (max-width:1080px){
67
68   .header .logo{
69       width: 200px;
70       top: 50%;
71       left: 50%;
72       margin-top: -70px;
73       margin-left: -100px;
74       transition: width 1s,
75                   margin 1s;
76   }
77
78   
79
80   .nav{
81       width: 90%;
82       display: flex;
83       position: relative;
84       margin: auto;
85       justify-content: space-between;
86       align-items:center;
87   }
88
89
90   .ul{
91       position: fixed;
92       display: flex;
93       justify-content: center;
94       flex-direction: column;
95       top: 120px;
96       left: -100%;
97       width: 70%;
98       background-color: rgba(255, 255, 255, 0.904);
99       height: calc(100vh - 120px);
100       overflow: hidden;
101       padding: 5px;
102       transition: left .5s ease-in-out;
103       z-index: 10000;
104   }
105
106  label #sign-open {
107       display: block;
108   }
109
110   #res-menu:checked ~ .ul {
111       top: 120px;
112       left: 0;
113   }
114   
115   #res-menu:checked ~ label #sign-open {
116       display:none;
117   }
118   
119   #res-menu:checked ~ label #sign-close {
120       display: block;
121   }
122
123
124
125
126}