Checkbox toggle doesn't work in mobile nav-menu (wp_nav_menu)

I'm trying to make the hamburger icon clickable, so that it opens the .top-bar nav menu. But it doesn't work, am I not targeting it correctly? It does hide the .top-bar and display hamburger icon when I resize the window, but on click, nothing happens. I've tried playing with multiple classes in order to target the top-bar, all without any success. Does the problem lay in how I display the top bar?

Please find the code below.

HTML (header)

<header class="header" id="myHeader">

        <div class="container">
            <?php
            $custom_logo_id = get_theme_mod('custom_logo');
            $logo = wp_get_attachment_image_src($custom_logo_id, 'full');

            if (has_custom_logo()) {
                echo '<a href="http://mywebpage.test/" class="site-link pull-left"> <img class="site-logo" src="' . esc_url($logo[0]) . '" alt="' . get_bloginfo('name') . '"> </a>';
            } else {
                echo '<h1 class="site-logo">' . get_bloginfo('name') . '</h1>';
            }
            ?>

        <label for="toggle">&#9776</label>
        <input type="checkbox" class="toggle">
            <?php
            wp_nav_menu(
                array(
                    'theme_location' => 'top-menu',
                    'menu_class' => 'top-bar'
                )
            );
            ?>
        </div>
    </header>

CSS

header .container {
    height: 100%;
    z-index: 10;
    display: flex;
    align-items: center;
    position: relative;
}

header .container .top-bar {
    list-style-type: none;
    display: flex;
}

header .container .site-link,
.site-logo {
    margin-right: auto;
}

header .top-bar li a {
    padding: 0 2rem;
    color: var(--off_white);
    font-size: 1.3rem;
    text-decoration: none;
    z-index: 1000;
}

header .top-bar li.current-menu-item a {
    background: var(--secondary);
    padding: 2.5rem 2rem 2.5rem 2rem;
}

header label {
    cursor: pointer;
    font-size: 2rem;
    color: var(--off_white);
    display: none;
}

.toggle {
    display: none;
}

@media (max-width: 992px) {
    header label {
        display: block;
    }
    .top-bar li {
        display: none;
    }
    .toggle:checked~li {
        display: block;
    }
}