title: Header won't change size and position when I open full page menu
body: <p>I can't seem to change my header size and position when my menu opens. I would like to move the header up and decrease the size. Instead of doing that, when I toggle the menu button, the header simply moves left. Can someone please help and explain? I've been stuck on this for the past two days. Thank you!</p>
  <p>HTML:</p>
  <pre><code>    &lt;body onload=&quot;myFunction()&quot; style=&quot;margin:0;&quot;&gt;
  
      &lt;!-- Loader --&gt;
      &lt;div id=&quot;loader&quot;&gt;Montée&lt;/div&gt;
  
      &lt;!-- Homepage --&gt;
      &lt;div style=&quot;display: none&quot;; id=&quot;myDiv&quot; class=&quot;container&quot;&gt;
          &lt;header&gt;
          &lt;h1 class=&quot;header&quot;&gt;Montée&lt;/h1&gt;
          &lt;/header&gt;
          
          &lt;!-- navigation --&gt;
          &lt;nav class=&quot;navbar&quot;&gt;
              &lt;div class=&quot;hamburger-menu&quot;&gt;
                  &lt;div class=&quot;line line-1&quot;&gt;&lt;/div&gt;
                  &lt;div class=&quot;line line-2&quot;&gt;&lt;/div&gt;
                  &lt;div class=&quot;line line-3&quot;&gt;&lt;/div&gt;
              &lt;/div&gt;
  
              &lt;ul class=&quot;nav-list&quot;&gt;
                  &lt;li class=&quot;nav-item&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;nav-link&quot;&gt;Tops&lt;/li&gt;
                  &lt;li class=&quot;nav-item&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;nav-link&quot;&gt;Bottoms&lt;/li&gt;
                  &lt;li class=&quot;nav-item&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;nav-link&quot;&gt;Shoes&lt;/li&gt;
                  &lt;li class=&quot;nav-item&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;nav-link&quot;&gt;Contact&lt;/li&gt;  
              &lt;/ul&gt;
          &lt;/nav&gt;
  
      &lt;/div&gt;
  
  &lt;script src=&quot;script.js&quot;&gt;&lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  <p>This is my CSS:</p>
  <pre><code>    .header {
      font-family: Garamond;
      color: white;
      font-size: 100px;
      letter-spacing: 5px;
      font-weight: 100px;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
  }
  
  .change .header {
      font-size: 30px;
      top: 30px;
  
  }
  
  .navbar {
      width: 0%;
      height: 100%;
      background-color: rgba(218,225,233,255) ;
      display: flex;
      justify-content: center;
      align-items: center;
      overflow: hidden;
  }
  
  .change {
      width: 100%;
  }
  </code></pre>
  <p>I included my nav css in case I did something wrong there that messes with the header but the navigation works.</p>
  <p>Lastly, my JS:</p>
  <pre><code> const menuIcon = document.querySelector (&quot;.hamburger-menu&quot;);
  const navbar = document.querySelector(&quot;.navbar&quot;);
  const header = document.querySelector(&quot;.header&quot;);
  
  menuIcon.addEventListener('click', () =&gt; {
      header.classList.toggle(&quot;change&quot;);
  });
  
  menuIcon.addEventListener('click', () =&gt; {
      navbar.classList.toggle(&quot;change&quot;);
  });
  </code></pre>