Как закрывать адаптивное меню при клике на якорь

такая проблема: при клике на якорь в адаптивном меню, меню не закрывается. Как можно это закрыть?

    .header {
        background: #fff;
        display: flex;
        justify-content: center;
        flex-direction: column;
        width: 100%;
        padding: 0 80px;
        border-bottom: 1px solid #eee;
    }
    
    .header__nav {
        display: flex;
        justify-content: space-between;
        flex-direction: row;
    }
    
    .header__logo {
        padding: 5px 0;
        width: 200px;
        height: 70px;
    }
    
    .header__menu {
        z-index: 333;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .header__link {
        font-family: $light;
        font-size: 15px;
        color: #333;
        text-transform: uppercase;
        padding: 5px 15px;
        border-radius: 4px;
        transition: .3s linear;
    }
    
    .header__link:hover{
      background: #333;
      color: #fff;
      transform: scale(1.1);
    }
    
    .header__icon {
        margin-right: 8px;
        font-size: 15px;
    }
    
    .show-menu-btn,.hide-menu-btn {
        transition: 0.4s;
        font-size: 30px;
        cursor: pointer;
        display: none;
    }
    .show-menu-btn {
        float: right;
    }
    .show-menu-btn i{
        line-height: 60px;
    }
    
    #chk {
        position: absolute;
        visibility: hidden;
        z-index: -1111;
    }
    
    @media screen and (max-width: 1024px) {
        .header {
            padding: 0 30px;
        }
        .header__logo {
            width: 170px;
            height: 70px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .header__menu {
            display: block;
            line-height: 60px;
            position: fixed;
            width: 100%;
            height: 100vh;
            background: #333;
            right: -100%;
            top: 0;
            text-align: center;
            padding: 80px 0;
            transition: 0.7s;
        }
    
        .show-menu-btn,.hide-menu-btn{
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .header__link {
            display: block;
            color: #fff;
        }
    
        .hide-menu-btn {
            position: absolute;
            top: 48px;
            right: 40px;
            color: #fff;
        }
        #chk:checked ~ .header__menu { 
            right: 0;
        }
    }
    
    @media screen and (max-width: 640px) {
        .header__menu {
            line-height: 60px;
            padding: 120px 20px;
        }
        .header__link{
            padding: 5px;
            color: #fff;
        }
        .hide-menu-btn {
            position: absolute;
            top: 70px;
            right: 30px;
        }
    }
<div class="header">
            <div class="header__nav">
                <a href="#"><img src="../img/logo_white.png" alt="Logo" class="header__logo"></a>
                <input type="checkbox" id="chk">
                <label for="chk" class="show-menu-btn">
                    <i class="fas fa-bars"></i>
                </label>
                <ul class="header__menu" id="menu">
                    <li>
                        <a href="../pages/index.php" title="Главная" class="header__link">
                            <i class="fas fa-home header__icon"></i>
                            Главная
                        </a>
                    </li>
                    <li>
                        <a href="#about" title="О нас" class="header__link">
                            <i class="fas fa-layer-group header__icon"></i>
                            О компании
                        </a>
                    </li>
                    <li>
                        <a href="../pages/blog.php" title="Блог" class="header__link">
                            <i class="far fa-newspaper header__icon"></i>
                            Блог
                        </a>
                    </li>
                    <li>
                        <a href="#price" title="Прайс" class="header__link">
                            <i class="fas fa-hand-holding-usd header__icon"></i>
                            Прайс
                        </a>
                    </li>
                    <li>
                        <a href="#contacts" title="Контакты" class="header__link">
                            <i class="fas fa-headset header__icon"></i>
                            Контакты
                        </a>
                    </li>
                    <label for="chk" class="hide-menu-btn">
                        <i class="fas fa-times"></i>
                    </label>
                </ul>
            </div>
        </div>


Ответы (0 шт):