如何防止项目出现在 wordpress 的固定导航栏下？

Question

我正在使用带有 Elementor 插件的 Astra 模板。

我已将我的导航栏设置为固定 - 与网页一起滚动，但现在我的项目出现在它下面。我不是在谈论 z-index 问题，而是导航栏之后的第一件事 - 面包屑 + 标题都在导航栏下。

.main-header-bar-wrap{
    position:fixed;
    top:0;
    width:100%;
}

我使用 --

解决了这个问题

padding-top:100px;

但我真的不认为这是最佳做法。

有没有更好的解决方案？

谢谢！

Answer 1

不幸的是，没有一种万无一失的方法可以做到这一点。固定元素完全脱离了页面流及其呈现方式，因此不占用任何 space。 https://developer.mozilla.org/en-US/docs/web/css/position#fixed

您的方法是一种选择，另一种是更改填充以匹配调整 window 大小时的高度（以确保高度始终正确）。

例如类似于：


$(window).resize(function () {
        $(".main").css("padding-top",$(".main-header-bar-wrap").outerHeight());
    })

另一种选择是使用 position: relative 和 visibility: hidden 创建 header 的隐藏副本，这将占用所需的 space 但不可见.只需确保添加 aria-hidden="true" 属性这样使用屏幕阅读器的人就不会得到重复的菜单。

您可以使用 js 执行以下操作：


$( ".main-header-bar-wrap" ).after( 
       $(".main-header-bar-wrap").clone().addClass("spacer").attr("aria-hidden","true") 
);

这将复制 header 并将 class spacer 添加到第二个版本中，因此您可以使用 visibility 和 position 分别设置样式属性，以及 aria-hidden 属性。

How to prevent items to appear under fixed navbar in wordpress?