title: How do I make links that were in the menu be on the nav bar on bigger screens?
body: <p>There are links that were shown on the side of the page as a menu when a button that was in the <code>header</code> was clicked. I want the button to be hidden and for those links to show up in the <code>header</code> instead. But if hide the button, the links do not show up, regardless of if I make the <code>display: block</code> or not. The only thing that happens is that the button is gone, but so are the links.</p>
  <p>I have JavaScript code that hides and shows the links when the button is clicked</p>
  <p>How do I change the position of the links?</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>header {
    height: 3.4rem;
    display: grid;
    align-items: center;
  }
  
  .header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .right i {
    margin-right: 1rem;
  }
  
  .menu {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1;
    background-color: #000;
    /* margin-left: 4rem; */
    margin-top: 0;
  }
  
  @media screen and (min-width: 992px) {
    .right i {
      display: none;
    }
    .menu {
      display: block;
    }
    .top-menu {
      display: flex;
      top: 0;
    }
    .header-container {
      display: flex;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;header&gt;
    &lt;div class="header-container"&gt;
      &lt;div class="left"&gt;
        &lt;img src="img/logo.jpg" alt=""&gt;
      &lt;/div&gt;
      &lt;div class="right"&gt;
        &lt;img src="img/user.png" alt=""&gt;
        &lt;i class="fa-solid fa-bars fa-xl"&gt;&lt;/i&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/header&gt;
  &lt;nav class="menu"&gt;
    &lt;div class="menu-container"&gt;
      &lt;i class="fa-solid fa-xmark fa-xl"&gt;&lt;/i&gt;
      &lt;div class="top-menu"&gt;
        &lt;a href=""&gt;Premium&lt;/a&gt;
        &lt;a href=""&gt;Support&lt;/a&gt;
        &lt;a href=""&gt;Download&lt;/a&gt;
        &lt;div class="menu-line"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="bottom-menu"&gt;
        &lt;a href=""&gt;Account&lt;/a&gt;
        &lt;a href=""&gt;Log out&lt;/a&gt;
      &lt;/div&gt;
      &lt;img src="img/logo.jpg" alt=""&gt;
    &lt;/div&gt;
  &lt;/nav&gt;</code></pre>
  </div>
  </div>
  </p>