Seeking assistance in creating a responsive menu navbar, I experimented with using a checkbox based on recommendations from various websites. However, despite my best efforts, the functionality remains elusive to me (I must admit, my expertise in this area is limited). The button fails to respond when checked or unchecked. If there are more efficient methods of achieving this goal using only HTML and CSS, please share your insights. In an effort to provide context, below is the code snippet. Recognizing that it may be excessive, I apologize for my lack of discretion.
html:
<nav>
<!--logo-->
<a href="#" class="logo">TBD</a>
<!--menu-->
<ul>
<li><a href="#" class="active">Landing page</a></li>
<li><a href="#">about me</a></li>
<li><a href="#">gallery</a></li>
<li><a href="#">blog</a></li>
<li><a href="#">contact</a></li>
</ul>
<input type="checkbox" id="check">
<label for="check" class="checkbtn">
<i class="fas fa-bars"></i>
</label>
</nav>
css:
nav{
display: flex;
justify-content: space-between;
align-items: center;
height: 60px;
background-color: #ffffff;
box-shadow: 2px 2px 12px rgba(0,0,0,0.2);
padding: 0px 5%;
}
nav ul li{
float: right;
display: inline-block;
}
nav ul li a{
margin: 30px;
font-family: calibri;
color: #505050;
font-size: 19px;
font-weight: 700;
}
.checkbtn{
font-size: 30px;
color: white;
float: right;
line-height: 80px;
margin-right: 40px;
cursor: pointer;
display: none;
}
#check{
display: none;
}
...
@media screen and (max-width: 796px) {
.checkbtn{
display: block;
margin-right: 40px;
color: black;
}
nav ul {
margin: 0px;
padding: 0px;
background-color: #ebeef4;
flex-direction: column;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100vh;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
z-index: 1;
display: none;
}
nav ul li {
padding: 10px;
display: block;
}
nav ul li a{
font-family: calibri;
font-size: 1.4em;
text-transform: uppercase;
color: #5c5c5c;
}
nav ul li a:hover{
color: #121212;
}
#check:checked ~ ul{
display: block;
left: 0;
background: rgba(0,0,0,0.8);
}
nav.active ul {
display: flex !important;
}
I'm actively trying to grasp this concept better, and I truly apologize for the lengthy post. Thank you for your understanding!