css - 在 WordPress 中使标题具有粘性

Question

我正在尝试使用 WordPress、Astra 主题使我的标题在我的网站的桌面版和移动版上都具有粘性。在桌面上，页面链接显示在标题中。在移动设备上，有一个下拉菜单。这是我最初的CSS：

.main-header-bar {
position: fixed;
left: 0;
right: 0;
}

完美适用于桌面，但在移动设备上存在两个问题：

1. 网站横幅被标题部分遮挡。
2. 一些下拉选项被标题遮住了。

就好像标题元素与网站的其余部分从同一层“删除”，然后重叠到它上面。

到目前为止，我对解决方案的尝试是向下拉菜单元素添加一些填充：

.ast-mobile-header-content {
position: relative;
left: 0;
right: 0;
padding-top: 100px;
}

这最终成为第二个问题的一个 hacky 解决方案 - 它的有效性取决于它所显示的设备的纵横比和分辨率。对于某些设备来说这还不够，而对于其他设备来说太多了。希望有一个属性允许我相对于指定元素（标题）而不仅仅是页面顶部的偏移量？

标签： csswordpressdrop-down-menu