PC端滚动时Logo固定问题求助：设置position:fixed后内容被遮挡

我是阿根廷开发者，英语表达欠佳，还请见谅。这是我首次制作网页，目前在header布局上遇到问题。我参考某网站样式，想要实现以下效果：

• PC端显示侧边栏菜单，Logo固定在顶部不随滚动移动
• 移动端显示居中Logo的Header，侧边菜单隐藏，可通过按钮唤起

已完成大部分功能，但PC端存在问题：滚动页面时Logo会随之上移。尝试设置header为position:fixed后，内容会被Header遮挡；将Header放入sidebar的话，移动端又无法显示居中的Header（因为sidebar被隐藏）。

以下是我的代码：

HTML代码 #

<body>
    <header>
      <img src="images/logo.png" class="logo" />
    </header>

    <div class="sidebar">
      <ul>
        <li><a href="#">Inicio</a></li>
        <li><a href="#">Mis Obras</a></li>
        <li><a href="#">Talleres</a></li>
        <li><a href="#">Contacto</a></li>
      </ul>
    </div>

    <div class="content">
      <h1>Title</h1>
      <p>Lorem ipsum dolor...</p>
    </div>

    <div class="menu-toggle">&#9776;</div>

    <script src="js/scripts.js"></script>
  </body>

CSS代码 #

html {
  height: 100vh;
}

body {
  height: 100vh;
}

header {
  width: 100%;
  padding: 10px 0 0 20px;
  background-color: wheat;
}
.sidebar {
  position: fixed;
  top: 100px;
  left: 0;
  width: 200px;
  height: 90vh;
  background-color: #222;
  color: #fff;
  text-align: center;
  transform: translateX(0);
  transition: transform 0.1s ease-in-out;
}
.content{
  margin-left: 200px;
  padding: 20px;
  background-color: #f6f6f6;
  height: 100vh;
}

.menu-toggle {
  position: fixed;
  top: 10px;
  right: 10px;
  display: none;
  width: 40px;
  height: 40px;
  background-color: #333;
  color: #fff;
  text-align: center;
  line-height: 40px;
  cursor: pointer;
}

@media screen and (max-width: 767px) {

  header {
    text-align: center;
    padding: 10px 0 0 0;
  }

  .content{
    margin-left: 0;
  }
  
  .sidebar {
    top: 0;
    width: 100%;
    height: 100vh;
    transform: translateX(-100%);
  }

  .sidebar.active {
    transform: translateX(0);
  }

  .menu-toggle {
    display: block;
  }
}

问题截图 #

• 正常状态：
• 滚动后状态：

恳请您提供解决思路，非常感谢！

内容的提问来源于stack exchange，提问作者user8448402