无法单击任何链接，因为 wordpress 中的元素覆盖了它们

Question

我在制作 wordpress 主题 (you can check out on this link) 时遇到问题，例如某些链接无法点击，因为被 header 元素阻止，例如下面的屏幕截图：

style.css

#content{
    width: 100%;
    padding-left: 0;
    padding-right: 0;
    z-index: -1;
}

.menu {
   margin: auto;
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   text-align: center;
   box-sizing: border-box;
   font-size: 22px;
   background-image: url('img/logo.png');
   background-repeat: no-repeat;
   background-size: 18% 21%;
   background-position: top center;
   background-attachment: scroll;
}

我该如何解决？先谢谢了！

Answer 1

根据您提供的代码，问题出在 .menu 的定位上。当您将 top、right、bottom 或 left 设置为 0 时，本质上，您是在使用 css 告诉 html 元素 'touch this side'。当您将所有四个都设置为 0 时，您是在告诉元素触摸所有 4 个边，从而覆盖整个页面。由于菜单覆盖了整个页面，当您将鼠标悬停在页面上时，您将鼠标悬停在菜单上，而没有其他任何东西。

尝试去掉底部：0；在 .menu 上，并为其设置高度。您还必须更改背景大小以适应新的菜单大小。

实际看现场，问题还不止这些，光靠这个是解决不了的。 div 和类 "collapse navbar-collapse" 似乎在做类似的事情，因此您也必须对其进行编辑。

希望对您有所帮助！

无法单击任何链接，因为 wordpress 中的元素覆盖了它们

Cannot Click Any Links because an element covering them in wordpress

css

wordpress

wordpress-theming