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

我正在使用Astra模板和Elementor插件

我已经将导航栏设置为固定的，可以沿着网页滚动，但现在我的项目显示在它下面。我不是在谈论z-index问题，而是navbar之后的第一件事——面包屑+标题都在navbar下

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

我用计算机解决了这个问题--

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

有没有更好的解决办法

---

谢谢大家!

不幸的是，没有一种万无一失的方法可以做到这一点。固定元素完全脱离了页面的流程和呈现方式，因此不会占用任何空间

这样做的方式是一种选择，另一种是在调整窗口大小时更改填充以匹配高度（以确保高度始终正确）

e、 g.类似于：

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

另一个选项是创建标题的隐藏副本，具有

位置：相对

和

可见性：隐藏

，这将占用所需空间，但不可见。只需确保添加

aria hidden=“true”

属性，这样使用屏幕阅读器的用户就不会得到重复的菜单

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

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

这将复制标题，并将类

间隔符

添加到第二个版本中，以便您可以使用

可见性

和

位置

属性以及

aria hidden

属性分别对其进行样式设置

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