在 Elementor/Wordpress 中修复了横向网站的 header

Question

我目前正在使用 elementor 在 Wordpress 中开发一个水平网站，一切正常，期待 header。

我使用元素或 html 元素和 css 将网站从垂直更改为水平并更改滚动方向。此外，我使用 html 元素和 css 代码来使锚点起作用。除此之外，我没有使用任何其他干扰方向的 html/css 代码或 header.

我想要达到的目标：

水平滚动时，header 应该是固定的。使导航菜单和徽标随视口移动。

我尝试了来自 YouTube、Whosebug 和 codepen 的多种解决方案（我尝试过的代码在本 post 的末尾）。

我使用的代码：

对于水平滚动：

<style>
@media (min-width:1024px){
    .elementor {
    width: 100vh;
    height: 100vw;
    overflow-x: hidden;
    overflow-y: scroll;
    transform: rotate(-90deg) translateX(-100vh);
    transform-origin: top left;
    position: absolute;
    scrollbar-width: none;
    -ms-overflow-style: none;
    overscroll-behavior-y: none;
    scroll-snap-type: y mandatory;

}

.elementor-section-wrap{
  transform: rotate(90deg) translateY(-100vh);
  transform-origin: top left; 
  display:flex;
  flex-direction: row; 
  width: 1100vw;
  
}

.section{ width:100vw; height:100vh;
    scroll-snap-align: start}
::-webkit-scrollbar{
display:none;

}


@media (max-width:768px){
    .elementor-section-wrap{
      display: block;
      overflow-x: hidden;
      overflow-y: scroll;
    
    }
}

</style>

对于应该固定的水平header：

<style>
@media (min-width:1024px){
    .header-horizontal {
 visibility: visible;
 position: fixed;
 
}
}

</style>

我尝试过不同的代码解决方案：

position:sticky - 不起作用，因为我已经在水平滚动中使用溢出功能。

https://codepen.io/gibatronic/pen/yLYzBze

（尝试使用解决方案中的代码但无法正常工作）

您可以在以下网址查看完整网站：“https://designlab-bremen.info”。

提前致谢

编辑：我正在使用“Hello Elementor”主题。

解决方案：我将 Ahmed Raza 的解决方案与插件“插入 Headers 和页脚”一起使用，以在标签下插入我的 header 的 html 代码。现在，header 在水平滚动时会粘在视口上。

Answer 1

如果你正在尝试这个

On devices with width > 1024px Header remains fixed while pages below scroll horizontally

然后将您的 header 标签放在打开 body 标签之后。喜欢

<body ...>
<header ...>
...
</header>
...
...
</body>

希望有用。

我打开了你的网站并用开发者工具检查了页面源代码。比起我复制您的 header 并将其位置更改为恰好在 body 标记之后的顶部。结果果然如你所说

在 Elementor/Wordpress 中修复了横向网站的 header

Fixed header for horizontal website in Elementor/Wordpress

html

css

wordpress

jquery

elementor