Не отображаются меню на отметке 768 пикселей

Question

Я пытаюсь сделать свой сайт отзывчивым на всех устройствах. Все идет хорошо, кроме одной проблемы. Когда я достигаю отметки ширины 768 пикселей (планшеты), я не вижу меню для этого 1 пикселя. Если, например, у меня 769 пикселей, я могу легко увидеть строку меню. И до отметки 768 пикселей я установил на моей панели навигации отображение кнопки переключения. Единственная проблема, с которой я работаю, - это то, что я не вижу ни своего переключателя, ни строки меню. Он исчезает на этой отметке.

Вот код 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

* Edit: Извините, я не понял, что это то, что вы хотели. В этом случае я бы сделал так:

@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);
}