Hamburger icon not showing on mobile - html

Question

I have a navbar on my Django application. The code for it is below.
.nav-header {
height: 75px;
width: 100%;
float: left;
background: #2e2e2e;
padding: 0 20px;
color: #fff;
margin-bottom: 25px;
border-bottom: 2px solid black;
}
.brand-logo {
max-width: 75px;
float: left;
padding: 14px 0px;
}
.brand-logo img {
max-width: 100%;
}
.navigation {
margin: 0px;
float: right;
}
.navigation li {
list-style: none;
float: left;
}
.navigation li a {
color: #fff;
padding: 28px 15px;
text-transform: uppercase;
text-align: center;
display: block;
text-decoration: none;
}
.navigation li a i {
width: 100%;
font-size: 20px;
margin-bottom: 7px;
}
.show-menu-btn,
.hide-menu-btn {
transition: 0.4s;
font-size: 30px;
cursor: pointer;
display: none;
z-index: 2;
}
.show-menu-btn {
margin: 0px;
margin-top: 15px;
float: right;
}
.show-menu-btn i {
line-height: 100px;
}
.navigation a:hover,
.show-menu-btn:hover,
.hide-menu-btn:hover {
color: #00ff0a;
}
#toggle-btn {
position: absolute;
visibility: hidden;
z-index: -1111;
}
#media screen and (max-width: 767px) {
.show-menu-btn,
.hide-menu-btn {
display: block;
}
.navigation {
position: fixed;
width: 100%;
height: 100vh;
background: #2e2e2e;
top: -100%;
left: 0;
padding: 50px 0px;
transition: 1s;
z-index: 1;
}
.navigation li {
width: 100%;
}
.navigation li a {
padding: 15px 15px;
text-align: left;
}
.navigation li a i {
width: auto;
font-size: 20px;
}
.hide-menu-btn {
position: absolute;
top: 15px;
right: 20px;
}
#toggle-btn:checked ~ nav .navigation {
top: 0px;
}
}
<div class="container">
<input type="checkbox" id="toggle-btn">
<label for="toggle-btn" class="show-menu-btn"><i class="fas fa-bars"></i></label>
<nav>
<ul class="navigation">
<li><i class="fas fa-house-damage"></i> Home</li>
{% if request.user.is_authenticated %}
<li><i class="fas fa-sign-out-alt"></i> Sign Out</li>
{% else %}
<li><i class="fas fa-sign-in-alt"></i> Sign In</li>
<li><i class="fas fa-user-plus"></i> Sign Up</li>
{% endif %}
<label for="toggle-btn" class="hide-menu-btn"><i class="fas fa-times"></i></label>
</ul>
</nav>
</div>
When I test it locally in google chrome on my PC using the device toolbar, it works completely fine. When I deploy it to my Heroku server, the hamburger icon does not show.
The label is there it just is not visible. When I try to randomly tap the screen in the area where it is supposed to be, it works but still does not show.