看不到 768 像素标记处的菜单

Question

我正在努力使我的网站能够响应所有设备。一切都很顺利，只是我有一个问题。当我达到768px的宽度标记(平板电脑(时，我看不到这1px的菜单。例如，如果我是769px，我可以很容易地看到我的菜单栏。在768px标记之前，我已经将导航栏设置为显示切换按钮。我运行的唯一问题是，我既看不到我的切换，也看不到菜单栏。它在这个标记处消失了。

这是HTML代码：

<header class="l-header">
<nav class="nav bd-grid">
<div>
<a href="#" class="nav__logo">Alex Roarke</a>
</div>
<div class="nav__menu" id="nav-menu">
<ul class="nav__list">
<li class="nav__item"><a href="#home" class="nav__link active">Home</a></li>
<li class="nav__item"><a href="#about" class="nav__link">About</a></li>
<li class="nav__item"><a href="#skills" class="nav__link">Skills</a></li>
<li class="nav__item"><a href="#portfolio" class="nav__link">Portfolio</a></li>
<li class="nav__item"><a href="#contact" class="nav__link">Contact</a></li>
</ul>
</div>
<div class="nav__toggle" id="nav-toggle">
<i class='bx bx-menu'></i>
</div>
</nav>
</header>

这是CSS代码：

@media screen and (min-width: 768px){

.nav{
height: calc(var(--header-height) + 1rem);
}
.nav__list{
display: flex;
}
.nav__item{
margin-left: var(--mb-4);
margin-bottom: 0;
}
.nav__toggle{
display: none;
}}

这是我的网站alexroarke.com，我正在那里测试我的代码。您可以从这里看到代码的其余部分。我现在正在学习编码，可以很容易地理解错误的原因，但在这里，我一无所知。此外，我的javascript工作得很好，因为它可以正确地切换菜单。

Answer 1

只需将媒体查询更改为768.9375px，而不是768px

*编辑：对不起，我没有意识到这正是你想要的。在这种情况下，我会这样做：

@media screen and (min-width: 768px)
.nav__toggle {
display: none;
}
@media screen and (max-width: 767.9375px)
.nav__menu {
position: fixed;
top: var(--header-height);
right: -100%;
width: 80%;
height: 100%;
padding: 2rem;
background-color: rgba(255,255,255,.3);
transition: .5s;
backdrop-filter: blur(10px);
}