title: CSS Grid: Make nav bar collapsible in mobile
body: <p>Trying my best to learn CSS Grid...
  I have made a nav menu but cannot get it to collapse for mobile view ('hamburger' menu style). I have tried using the 'checkbox hack' seen in several videos and online tutorials. 
  I also can't seem to get all of the links to list (list begins at 'Products' in my mobile view, but should begin at 'About Us').</p>
  
  <p>Been working on this for days with no luck.</p>
  
  <p>If anyone could help me out in getting this to work I would be very grateful.</p>
  
  <p>Here's the HTML &amp; CSS:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html, body{
       margin: 0;
       padding: 0;
       font-family: Roboto, sans-serif;
       font-size: 100%;
  }
   header{
      /* grid-column-start: 1;
       grid-column-end: 3;
       grid-row:1;
       */
       grid-area: header;
       background-image:linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)), url(../img/rockspiral.jpg);
       display: grid;
       grid-template-columns: repeat (4, 1fr);
      /* 100px, 1fr 1fr 1fr;
      */
      /**** Change to 10% and 90% otherwise it takes up the full viewport ****/
       grid-template-rows: 100px auto;
       grid-template-areas: "logo topbar-nav topbar-nav topbar-nav" ". hero-text hero-text . ";
  }
   .logo{
       grid-area: logo;
       background-image:url(../img/logo-mobile.png);
       background-repeat: no-repeat;
       margin-left: 10px;
  }
   .topbar-nav{
       grid-area: topbar-nav;
       color:white;
       background-color: lightblue;
       justify-self: end;
       align-self: center;
  }
   .topbar-nav, ul, li{
       list-style-type: none;
       float: left;
       padding: 0px 5px 0px 5px;
  }
   .hero-text{
       grid-area: hero-text;
       color:white;
       justify-self: center;
       align-self: center;
  }
   .hero-text h1{
       font-size: 600%;
  }
   .hero-text p{
       font-size: 200%;
       text-align: center;
  }
   nav{
       grid-area: nav;
  }
   .grid-about{
      /* grid-column-start: 1;
       grid-column-end: 4;
       grid-row:2;
      */
       grid-area: about;
  }
   .grid-products{
      /* grid-column-start: 1;
       grid-column-end: 4;
       grid-row:3;
      */
       grid-area: products;
  }
   .grid-services{
      /* grid-column-start: 1;
       grid-column-end: 4;
       grid-row:4;
       */
       grid-area: services;
  }
   .grid-contact{
       grid-area: contact;
  }
   .grid-location{
       grid-area: location;
  }
   .grid-phone-social{
       grid-area: phone;
  }
   footer{
      /* grid-column-start: 1;
       grid-column-end: 4;
       grid-row:6;
      */
       grid-area: footer;
  }
  /****Grid for mobile screens****/
   @media (max-width: 767px){
       .grid-container{
           display: grid;
           background-color: aqua;
           grid-auto-rows: 50vh;
           grid-gap: 10px;
           grid-template-areas: "header" 
          /* "nav"*/
           "about" "products" "services" "contact" "location" "phone" "footer";
      }
       header{
           background-image:linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)), url(../img/rockspiral-mobile.jpg);
           background-repeat: no-repeat;
          /* Change to: grid-template-columns: 110px auto;
          */
           grid-template-columns: 110px auto;
           grid-template-rows: 50px auto;
           grid-template-areas: "logo topbar-nav" "hero-text hero-text";
      }
       .topbar-nav ul, li{
           display: grid;
           grid-template-rows: 10px;
           grid-gap: 5px;
           font-size:75%;
           float:left;
      }
       .hero-text h1{
           font-size: 300%;
           text-align: center;
      }
       .hero-text p{
           font-size: 150%;
           text-align: center;
      }
  }
  /****Grid for tablet screens****/
   @media (min-width: 768px){
       .grid-container{
           display: grid;
           grid-auto-rows: 100vh;
           grid-gap: 10px;
           background-color: red;
           grid-template-areas: "header" 
          /* "nav" */
           "about" "products" "services" "contact" "location" "phone" "footer";
      }
       header{
           grid-area: header;
           background-image:linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)), url(../img/rockspiral.jpg);
           display: grid;
          /* changed: column size 260px 1fr 1fr 1fr*/
           grid-template-columns: 260px 1fr 1fr 1fr;
           grid-template-rows: 100px auto;
           grid-template-areas: "logo topbar-nav topbar-nav topbar-nav" "hero-text hero-text hero-text hero-text";
      }
       .logo{
           grid-area: logo;
           background-image:url(../img/logo.png);
           background-repeat: no-repeat;
           margin-left: 10px;
      }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  
  &lt;html lang=en&gt;
  
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
  
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
  
      &lt;link rel="stylesheet" href="css/layout.css"&gt;
  
      &lt;link href="https://fonts.googleapis.com/css?family=Roboto&amp;display=swap" rel="stylesheet"&gt;
  
      &lt;title&gt;CSS Grid Sandbox&lt;/title&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
      &lt;div class="grid-container"&gt;
  
          &lt;header&gt;
  
              &lt;div class="logo"&gt;&lt;/div&gt;
  
              &lt;div class="topbar-nav"&gt;
  
                  &lt;ul&gt;
  
                      &lt;li&gt;About&lt;/li&gt;
                      &lt;li&gt;Products&lt;/li&gt;
                      &lt;li&gt;Services&lt;/li&gt;
                      &lt;li&gt;Contact&lt;/li&gt;
                      &lt;li&gt;Location &amp; Hours&lt;/li&gt;
                      &lt;li&gt;Phone &amp; Social Media&lt;/li&gt;
  
                  &lt;/ul&gt;
  
              &lt;/div&gt;
  
              &lt;div class="hero-text"&gt;
  
                  &lt;h1&gt;Big Rock Sale&lt;/h1&gt;
                  &lt;p&gt;All rocks 50% off. Offer ends soon!&lt;/p&gt;
  
              &lt;/div&gt;
  
          &lt;/header&gt;
  
          &lt;!--  &lt;nav&gt;Nav&lt;/nav&gt;  --&gt;
  
          &lt;section class="grid-about"&gt;About Us&lt;/section&gt;
  
          &lt;section class="grid-products"&gt;Products&lt;/section&gt;
  
          &lt;section class="grid-services"&gt;Services&lt;/section&gt;
  
          &lt;section class="grid-contact"&gt;Contact&lt;/section&gt;
  
          &lt;section class="grid-location"&gt;Location &amp; Hours&lt;/section&gt;
  
          &lt;section class="grid-phone-social"&gt;Phone &amp; Social Media&lt;/section&gt;
  
          &lt;footer&gt;Footer&lt;/footer&gt;
  
      &lt;/div&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>