Почему элементы моего меню не отображаются при размере рабочего стола?

Question

Я следовал этому учебнику, чтобы создать отзывчивое меню гамбургеров. Но я не могу понять, почему пункты меню не отображаются, когда мой экран имеет размер рабочего стола.

Когда экран мобильного размера, я могу щелкнуть меню гамбургера, и элементы появятся. Если я увеличиваю размер экрана до размера рабочего стола, когда меню «открыто», они отображаются так, как я хочу (из-за моего медиазапроса ie). Но когда я обновляю sh страницу (пока мой экран имеет размер рабочего стола), мои пункты меню не появляются. Я не могу понять это, пожалуйста, помогите, если вы видите мою ошибку. Спасибо!

Вот что я хочу:

Вот что я получаю сейчас:

Это то, что я получаю, когда масштабируюсь на экран мобильного телефона:

body {
  margin: 0;
  background-color: #fff;
}
.header {
    background-color: #fff;
    position: fixed;
    width: 100%;
    z-index: 3;

    .menu-btn {
        display: none;

        &:checked ~ .menu {
            max-height: 240px;
        }

        &:checked ~ .menu-icon .nav-icon {
            background: transparent;

            &:before {
                transform: rotate(-45deg);
                top: 0;
            }

            &:after {
                transform: rotate(45deg);
                top: 0;
            }
        }
    }
    .menu-icon {
        padding: 28px 20px;
        position: relative;
        float: right;
        cursor: pointer;

        .nav-icon {
            background: #333;
            display: block;
            height: 2px;
            width: 18px;
            position: relative;
            transition:background .2s ease-out;

             &:before {
                 background: #333;
                 content: "";
                 display: block;
                 height: 100%;
                 width: 100%;
                 position: absolute;
                 transition: all .2s ease-out;
                 top: 5px;
             }

             &:after {
                background: #333;
                content: "";
                display: block;
                height: 100%;
                width: 100%;
                position: absolute;
                transition: all .2s ease-out;
                top: -5px;
             }

        }

    }

    .menu {
        margin: 0;
        padding: 0;
        list-style: none;
        overflow: hidden;
        background-color: #fff;
        color: #403e3f;
        clear: both;
        max-height: 0;
        transition: max-height .2s ease-out;

        li {

            a {
                display: block;
                padding: 20px;
                border-right: 1px solid #aaa;
                text-decoration: none;

            }
        }

    }
}

@media (min-width: 48em) {
    
    li {
        float: left;

        a {
            padding: 20px 30px;
        }
    }

    .menu {
        clear: none;
        float: right;
        max-height: none;
    }

    .menu-icon {
        display: none;
    }
}

<header class="header">
  <input class="menu-btn" type="checkbox" id="menu-btn" />
  <label class="menu-icon" for="menu-btn"><span class="nav-icon"></span></label>
  <ul class="menu">
      <li><a href="#">oplossingen</a></li>
      <li><a href="#forget">product</a></li>
      <li><a href="#forget">about</a></li>
</header>

Answer 1

Вам необходимо удалить max-height: 0; и max-height:250px, установить height: auto; в меню в медиа-запросе, чтобы меню отображалось на рабочем столе.

Обновление I Вы исправили фрагмент, теперь он работает.

body {
  margin: 0;
  background-color: #fff;
}

.header {
  background-color: #fff;
  position: fixed;
  width: 100%;
  z-index: 3;
}

.menu-btn {
  display: none;
}
.menu-btn:checked ~
.menu {
  height: auto;
}
.menu-btn:checked ~ .menu-icon .nav-icon {
  background: transparent;
}
.menu-btn:checked ~ .menu-icon .nav-icon:before {
  transform: rotate(-45deg);
  top: 0;
}
.menu-btn:checked ~ .menu-icon .nav-icon:after {
  transform: rotate(45deg);
  top: 0;
}

.menu-icon {
  padding: 28px 20px;
  position: relative;
  float: right;
  cursor: pointer;
}

.nav-icon {
  background: #333;
  display: block;
  height: 2px;
  width: 18px;
  position: relative;
  transition: background .2s ease-out;
}
.nav-icon:before {
  background: #333;
  content: "";
  display: block;
  height: 100%;
  width: 100%;
  position: absolute;
  transition: all .2s ease-out;
  top: 5px;
}
.nav-icon:after {
  background: #333;
  content: "";
  display: block;
  height: 100%;
  width: 100%;
  position: absolute;
  transition: all .2s ease-out;
  top: -5px;
}

.menu {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
  background-color: #fff;
  color: #403e3f;
  clear: both;
  height: 0;
  transition: height .2s ease-out;
}
.menu a {
  display: block;
  padding: 20px;
  text-decoration: none;
}

@media screen and (min-width: 48em) {
  .menu-icon {
    display: none;
  }

  .menu {
    float: right;
    height: auto;
  }
  .menu li {
    display: inline-block;
  }
}

<header class="header">
  <input class="menu-btn" type="checkbox" id="menu-btn" />
  <label class="menu-icon" for="menu-btn"><span class="nav-icon"></span></label>
  <ul class="menu">
      <li><a href="#">oplossingen</a></li>
      <li><a href="#forget">product</a></li>
      <li><a href="#forget">about</a></li>
</header>