After tweaking the @media {} settings, I noticed that the icon displays properly when reduced, but disappears completely when fully covered with {}. Additionally, my responsive menu is not visible as expected.
`@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
body {
font-family: 'Roboto', sans-serif;
}
*{
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
nav {
background-color: orange;
height: 80px;
}
nav ul{
float: left;
margin-left: 10px;
}
nav ul li {
display: inline-block;
line-height: 80px;
margin: 0 15px;
}
nav ul li a {
position: relative;
color:white;
font-size: 18px;
text-transform:uppercase;
padding: 5px 0;
}
nav ul li a:before {
position:absolute;
content: '';
left: 0;
height: 3px;
width: 100%;
bottom: 0;
transform:scaleX(0);
transform-origin: right;
background-color: white;
transition: transform .4s linear;
}
nav ul li a:hover:before{
transform: scaleX(1);
transform-origin: right;
}
label #btn,
label #cancel {
color: white;
font-size: 30px;
float: left;
line-height: 80px;
margin-left: 20px;
cursor:pointer;
display:none;
}
#check {
display:none;
}
@media (max-width: 980px) {
ul {
position:fixed;
height: 100vh;
width: 70%;
background-color: orange;
text-align:left;
top: 80px;
left:-100%;
transition: all .4s;
li {
position:relative;
left: 65px;
}
nav ul li {
display:block;
margin:50px 0;
line-height: 30px;
}
label #btn {
display: block;
}
nav ul li a {
font-size: 16px;
}
}
#check:checked ~ ul {
left:0;
}
}<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w==" crossorigin="anonymous" />
<nav>
<input type="checkbox" id="check">
<label class="check" >
<i class="fa fa-bars" id="btn" ></i>
<i class="fa fa-times" id="cancel" ></i>
</label>
<ul>
<li><a href="#" >Home</a></li>
<li><a href="#" >Forums</a></li>
<li><a href="#" >Store</a></li>
<li><a href="#" >Vote</a></li>
<li><a href="#" >Contact us</a></li>
</ul>
</nav>My objective is for the menu to be displayed upon clicking the icon, however, currently the icon font itself is not showing. Moreover, on larger screens like desktops, the text should be visible while the icon remains hidden, yet this is also not happening at the moment.