自适应导航栏在iPad上不起作用

Question

我正在拼凑我的第一个网站，陷入僵局。为什么导航栏元素无法进入iPad的汉堡包模式？我细读的一些文章建议编写一些javascript代码-此刻在我的头上有点高。这是工作代码。

HTML

<header class="header">
<img src="images/Weblogo.png" alt="RRR" class="logo" height="50px" width="70px">
<h3 class="navtitle">RRR</h3><input class="menu-btn" type="checkbox" id="menu-btn">
<label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>
<ul class="menu">
  <li class="non-active"><a href="RRR.html">Home</a></li>
  <li class="non-active"><a href="OlderPosts.html">Older Posts</a></li>
  <li class="active"><a href="Legal.html">Policies & Legal</a></li>
</ul>   </header>

CSS

* {box-sizing: border-box;
 padding: 0;
 margin: 0;
 Left:0;
 }

 body {
 font-family: Arial; 
 padding: 20px;
 background: #f1f1f1;
 }

 a {
   color: #000;
 }

 /* header */

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

 .header ul {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
  background-color: #fff;
  }

 .header li a {
  display: block;
  padding: 20px 20px;
  border-right: 1px solid #f4f4f4;
  text-decoration: none;
  }

 .header li a:hover, .header .menu-btn:hover {   background-color:
  #f4f4f4; }

 .header .logo {   display: block;   float: left;   font-size: 2em;  
  padding: 10px 20px;   text-decoration: none; }

  /* menu */

  .header .menu {   clear: both;   max-height: 0;   transition:
   max-height .2s ease-out; }

   /* menu icon */

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


     .navtitle {

      display: inline-block;   width: 100%;   text-align: center;  
      position: fixed;   top: 10px;   font-family: 'Comfortaa', arial,
     sans-serif;   font-weight: bold;   font-size: 24pt;   color:        
     #ac4c7c;}

     .header .menu-icon .navicon {   background: #ac4c7c;   display:
      block;   height: 2px;   position: relative; 
      transition: background.2s ease-out;   width: 18px; }

      .header .menu-icon .navicon:before, .header .menu-icon   
      .navicon:after

     {   background: #ac4c7c;   content: '';   display: block;   
         height: 100%;   position: absolute;   
         transition: all .2s ease-out;   width: 100%; }

        .header .menu-icon .navicon:before {   top: 5px; }

        .header .menu-icon .navicon:after {   top: -5px; }

       /* menu btn */

      .header .menu-btn {   display: none; }

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

      .header .menu-btn:checked ~ .menu-icon .navicon {   background:
        transparent; }

      .header .menu-btn:checked ~ .menu-icon .navicon:before 
       {transform: rotate(-45deg); }

       .header .menu-btn:checked ~ .menu-icon .navicon:after 
        {transform: rotate(45deg); }

         .header .menu-btn:checked ~ .menu-icon:not(.steps)   
         .navicon:before,
         .header .menu-btn:checked ~ .menu-icon:not(.steps        
         .navicon:after {top: 0; }


        .non-active {
         display: block;
        text-align: center;
        font-size: 18pt; }


         .active {
           display: block;
           text-align: center;
           font-size: 18pt;
           font-weight: bold;
           clear:both;
       }


       @media screen and (max-width: 850px) {
       @media (min-width: 48em) {
       .header li {
        float: left;
        }
      .header li a {
        padding: 20px 30px;
       }
      .header .menu {
       clear: none;
        float: right;
       max-height: none;
       }

        }


       .leftcolumn, .rightcolumn {
       width: 100%;
       padding: 0;

        }



        }

我希望这是有道理的。

先谢谢了。每天都是学习的日子。