Hamburger toggle is not working on mobile - html

Question

I made a hamburger toggle that is supposed to transform. On my laptop it shows perfectly but on my mobile nothing is done to it. It is just a checkbox on the left side. None of the styles were applied to it. I have media queries but none apply to this. It is bootstrap but I made a custom toggler.
#custom-toggler {
border: none;
float: right;
margin: 25px 15px 0 0
}
#custom-toggler input{
display: block;
width: 40px;
height: 32px;
position: relative;
top: -7px;
left: 5px;
float: right;
cursor: pointer;
opacity: 0; /* hide this */
z-index: 2; /* and place it over the hamburger */
-webkit-touch-callout: none;
}
#custom-toggler input:checked ~ span
{
opacity: 1;
transform: rotate(45deg) translate(-2px, -1px);
background: white;
}
#custom-toggler span:first-child
{
transform-origin: 0% 0%;
}
#custom-toggler span:last-child
{
transform-origin: 0% 100%;
}
#custom-toggler input:checked ~ span:last-child
{
transform: rotate(-45deg) translate(0, -1px);
}
#custom-toggler input:checked ~ span:nth-child(2n-1)
{
opacity: 0;
transform: rotate(0deg) scale(0.2, 0.2);
}
#custom-toggler span {
display: block;
width: 33px;
height: 4px;
margin-bottom: 5px;
position: relative;
background: #cdcdcd;
border-radius: 3px;
z-index: 1;
transform-origin: 4px 0px;
transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
opacity 0.55s
}
<nav class="small-nav navbar-light fixed-top ">
<a class="navbar-brand " href="index.html"><img id='logo'
src="../image/TreysCode-logo1.png"></a>
<div id='custom-toggler'>
<input type="checkbox" data-toggle="collapse" data-
target="#navbarSupportedContent" aria-
controls="navbarSupportedContent" aria-expanded="false" aria-
label="Toggle navigation"/>
<span ></span>
<span ></span>
<span ></span>
</div>

Answer 1

Missing Vendor prefixes
Safari is one of those Browsers which still requires the -webkit-* prefix on most newer Styles.
Just turn every of the following
transform: ...;
transform-origin: ...;
transition: ...,
transform ...;
into
-webkit-transform: ...;
transform: ...;
-webkit-transform-origin: ...;
transform-origin: ...;
-webkit-transition: ...,
-webkit-transform ...,
transform ...;
transition: ...,
-webkit-transform ...,
transform ...;
If a browser sees the -webkit-* it will use it if it can, if not they get simply ignored and the next (non-prefixed) Style gets used.