尝试向 wordpress 网站添加粘性菜单

【问题标题】：trying to add a sticky menu to wordpress website尝试向 wordpress 网站添加粘性菜单
【发布时间】：2020-04-05 15:54:30
【问题描述】：

使用以下 CSS，我设法在我的 wordpress 网站上创建了一个粘性菜单。不幸的是，我的菜单现在与所有页面上的标题重叠。如何将我的菜单和内容分开，以便所有内容都从菜单下方开始？

#header-grid {
    background:#fff;
    height:60px;
    z-index:170;
    margin:0 auto;
    width:100%;
    position:fixed;
    top:0;
    left:0;
    right:0;
    text-align: center;
}

&lt;div class=header-grid&gt;

【问题讨论】：

我们需要minimal reproducible example。不是一个 div

标签： css menu sticky

【解决方案1】：

而不是class="" 使用id=""
不要使用absolute 或fixed（它们会重叠），而是使用：

position: sticky;

/* QuickReset */ * {margin:0; box-sizing:border-box;}

body {
  height: 300vh;
  border: 4px dashed #000;
}

#header-grid {
  background: rgba(255,0,0,0.6);
  height: 60px;
  z-index: 170;
  margin: 0 auto;
  width: 100%;
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  text-align: center;
}

<div id="header-grid">HEADER</div>
Page content

【讨论】：