I have added the `position: fixed;` to the top section where the menu and logo is placed. It did keep showing the menu while scrolling down but it also disrupted the order and space of the logo and menu.
Is there a way to overcome this issue? or and alternative way to keep the menu while scrolling down?

[The section that I want to keep while scrolling down](https://i.stack.imgur.com/QDBQh.png)

[The unwanted result](https://i.stack.imgur.com/Q6nBS.png)

```css
html {
  scroll-behavior: smooth;
}

body {
  background: #fafafa;
}

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 3fr 3fr 3fr 2fr;
  grid-template-areas: "logo . menu menu" "hi hi hi hi" "what what what what" "projects projects projects projects""contact contact contact contact";
}

.logo {
  background: #fafafa;
  grid-area: logo;
  display: flex;
  justify-content: center;
  justify-items: center;
  position: fixed;
}

.logo img {
  object-fit: contain;
}

.menu {
  display: flex;
  grid-area: menu;
  background-color: #fafafa;
  text-align: center;
  align-items: center;
  justify-content: center;
  position: fixed;
}

.menu a {
  position: relative;
  cursor: pointer;
  font-size: 20px;
  font-family: 'Roboto', sans-serif;
  text-decoration: none;
  color: black;
}

.menu a+a {
  margin-left: 1rem;
}

.menu a::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  transform: scaleX(0);
  transition: transform 0.4s ease;
  transform-origin: bottom right;
  background-color: #ff9c00;
}

.menu a:hover::after {
  transform-origin: bottom left;
  transform: scaleX(1);
}

.hi {
  grid-area: hi;
  background-color: #c2edda;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hi img {
  max-width: 100%;
  width: 37em;
  animation: fadein 2s;
  padding: 150px 150px 150px 50px;
}

@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@media screen and (max-width: 1080px) {
  .hi {
    justify-content: flex-end;
  }
  .hi p {
    font-size: 20px !important;
  }
}

@media screen and (max-width: 870px) {
  .hi img {
    display: none;
  }
  .hi {
    justify-content: center;
  }
}

.hi p {
  font-size: 35px;
  text-align: center;
  font-family: 'Roboto';
}

.what {
  padding: 50px 50px 50px 50px;
  font-family: 'Roboto';
  grid-area: what;
  background-color: #fafafa;
  display: flex;
  justify-items: center;
  justify-content: center;
}

.what img {
  object-fit: contain;
  width: 15%;
  height: auto;
  position: absolute;
  margin-top: 100px;
}

.projects {
  font-family: 'Roboto';
  display: flex;
  justify-content: center;
  padding: 50px 50px;
  grid-area: projects;
  background-color: khaki;
}

.pContainer {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 1px 1px;
  grid-template-areas: ". headline headline ." "p1 p2 p3 p4" ". . . .";
  justify-content: space-between;
}

.headline {
  grid-area: headline;
  display: flex;
  justify-content: center;
}

.p1 {
  grid-area: p1;
}

.p2 {
  grid-area: p2;
  display: flex;
  justify-content: center;
}

.p3 {
  grid-area: p3;
  display: flex;
  justify-content: center;
}

.p4 {
  grid-area: p4;
}

.contact {
  grid-area: contact;
  background-color: steelblue;
}
```

```html
<div class="grid-container">
  <div class="logo"><img src="logo.png"></div>
  <div class="menu">
    <ul>
      <a href="#who" class="list-inline-item">Who</a>
      <a href="#skills" class="list-inline-item">What</a>
      <a href="#proj" class="list-inline-item">Projects</a>
      <a class="list-inline-item">Contact</a>
    </ul>
  </div>
  <div id="who" class="hi">
    <img src="photo.png" alt="photo">
    <p id="para">
      Hi! I'm Avichai, <br> I'm a 22 y/o junior web developer and designer. <br> My knowledge is based mainly <br> on my high school computer science extension, <br> my continuous self-learning and curisity.
    </p>
  </div>
  <div id="skills" class="what">
    <h1>Knowledge and Skills</h1>
    <img src="3logo.png">
  </div>

  <div id="proj" class="projects">

    <div class="pContainer">
      <div class="headline">
        <h1>Projects</h1>
      </div>
      <div class="p1"></div>
      <div class="p2">Lone Soldier Realty</div>
      <div class="p3">Freelance Graphic Design</div>
      <div class="p4"></div>
    </div>
    <div id="contact" class="contact">

    </div>

  </div>
```

[GitHub Link to Website Code](https://github.com/avihyb/avihyb.github.io)

Thank you very much. :)