Why does the checkbox become unclickable when width is lowered?

Your checkbox becomes unclickable because the <input type="checkbox"> is placed inside the <label>, but the icons (<i class="fas fa-bars"> and <i class="fas fa-times">) are positioned absolutely/fixed, causing them to sit on top of the checkbox, blocking pointer events.

To fix this issue wrap the checkbox and icons as;

<label for="close" class="menu-toggle"> <input type="checkbox" id="close"> <i class="fas fa-bars"></i> <i class="fas fa-times"></i> </label>

Next give the label a real clickable area

.menu-toggle { position: fixed; right: 10px; top: 15px; width: 40px; height: 40px; cursor: pointer; z-index: 500; } .menu-toggle i { position: absolute; font-size: 28px; color: white; }