如何通过更大的屏幕使可折叠的移动菜单消失？

Question

我正在尝试创建一个具有移动可折叠菜单的响应式菜单。只有单击切换按钮才会显示菜单。如果我将屏幕缩小并点击显示菜单，当我展开浏览器时，即使我有display：none;和能见度：无;在大型媒体查询。但是，如果我将屏幕设置为较大，请将其缩小，单击切换按钮，然后再次展开它会执行我期望的操作。这是jsfiddle：

https://jsfiddle.net/dptbqc1e/#&togetherjs=JEpaO4q27M

<header class="header">
        <a class="logo" href="index.html">Blog.</a>
        <ul class="nav nav_big-screen">
            <li class="nav__item">
                <a class="nav__link" href="#">Home</a>
            </li>
            <li class="nav__item">
                <a class="nav__link" href="#">About</a>
            </li>
            <li class="nav__item">
                <a class="nav__link" href="#">Blog</a>
            </li>
        </ul>
        <img class="toggle" src="img/nav.png">
        <ul class="nav nav_small-screen">
            <li class="nav__item">
                <a class="nav__link" href="#">Home</a>
            </li>
            <li class="nav__item">
                <a class="nav__link" href="#">About</a>
            </li>
            <li class="nav__item">
                <a class="nav__link" href="#">Blog</a>
            </li>
        </ul>
    </header>

我只把HTML放在这里，因为它说我必须这样做。其他所有东西都在jsfiddle中。谢谢，我希望这是有道理的！