Fixed header for horizontal website in Elementor/Wordpress-CodePudding

I'm currently working on a horizontal website in Wordpress with elementor and everything is working fine expect for the header.

I used the elementor html element with css to change the website from vertical to horizontal and to change the scrolling orientation. Furthermore, I used the html element with css code to make the anchors functional. Other than that I'm not using any other html/css code that is interfering with the orientation or header.

What I'm trying to achieve:

The header should be fixed, when scrolling horizontally. So that the navigation menu and the logo is moving with the viewport.

I've tried multiple solutions from YouTube, stackoverflow and codepen (the codes I've tried are at the end of this post).

The codes I'm using:

For the horizontal scroll:

<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>

For the horizontal header that is supposed to be fixed:

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

</style>

I've tried different code solutions:

position:sticky - isn't working because I'm already using the overflow function for the horizontal scroll.

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

Fixed header with horizontal scrolling content (tried to use the code from the solution but couldn't get it to work)

You can view the full website at: "https://designlab-bremen.info".

Thanks in advance

CodePudding user response：

If you are trying this this

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

Then place your header tags just after opening body tag. Like

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

I hope it will work.

I opened you website and checked the pagesource with developer's tool. Than I copied your header and changed it's position to top exactly after body tag. Then result was exactly as you said.