CSS 固定菜单与内容重叠

css fixed menu overlaps the content

本文关键字：重叠 菜单 CSS      更新时间：2023-09-26

我有一个顶部菜单，必须始终可见，所以我使用了位置：固定。它可以工作，菜单始终位于窗口顶部。问题出在内容上，下一个带有大图像的div 被菜单剪切：

#header {
   position: fixed;
   top: 0;
}

您可以在此链接中看到菜单：

http://212.48.86.94/~admin/el-cuartel-gana-el-tercer-premio-mejor-agencia-independiente-en-los-premios-control-2014/

我尝试过修改位置、溢出和火虫中的所有内容，但没有运气。

此外，我正在修改的 wp 主题对高度进行了一些 javascript 计算，并使用了滚动事件。

我不知道如何解决它。

到你的英雄包装器，只需添加一个边距。

#hero-wrapper{
    margin-top: 68px;
}

这将偏移固定标题的宽度

其他一些注意事项...

第 2549 行有一个控制台.log（） 你应该删除它。

console.log('dentro1');

main.js 的第 2551 行在滚动时引发错误

$categoryHash = document.URL.split('?')[1].replace( /^filter=/, '' );
Uncaught TypeError: Cannot read property 'replace' of undefined

只需将标头添加到CSS中margin-top: 100px或任何值即可。 这将确保您的内容不会被页面顶部覆盖。 你可以尝试这样的事情：

#nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100px;
  background: blue;
  color: white;
}
.content {
  margin-top: 100px;
  }
<div id="nav">Welcome</div>
<div class="content">bla
  <br>bla
  <br>bla
  <br>bla
  <br>bla
  <br>bla
  <br>bla
  <br>bla
  <br>bla
  <br>bla
  <br>bla
  <br>bla
  <br>bla
  <br>bla
  <br>bla
  <br>bla
  <br>bla
  <br>bla
  <br>bla
  <br>bla
  <br>

我希望这有所帮助。 如果您需要其他帮助，请在下面的评论中告诉我。

相关文章：