Create Horizontal scrolling website with css & Elementor

0

We actually can make Horizontal scrolling website with elementor but we need some help of CSS.

First design and make all of your section just like you want.
Set each section height to “Fit to screen”, so that each section covers the entire height of our screen.

Lets give all sections a common css class so that we can target all of them at once.
For my case I am calling it “section”.
Now the CSS part. 🙂
Elementor by default wraps each page with 2 divs one is “elementor-inner” and another is “elementor-section-wrap”.
So we need to target them.
Lets add the CSS

.elementor-inner{
width:100vh;
height:100vw;
overflow-x:hidden;
overflow-y: scroll;
transform: rotate(-90deg) translateX(-100vh);
transform-origin: top left;
position:absolute;
}

For “elementor-inner” we need to set the width and height first.
for width we have to set it to 100vh so that it equals to 100 view port height. And the height will be 100vw.

Then we need to hide the ‘X’ axis scroll so that we can only scroll to the ‘Y’ axis. so overflow-x will be hidden and overflow-y will be shown.

We need to add a transform property to rotate it -90 degree. and then translate it to ‘X’ by -100vh.
Then set the transform origin to top left so that it starts from top left of the screen.

Set the position to absolute.

Now lets target the “elementor-section-wrap” and add some CSS
.elementor-section-wrap{
  transform: rotate(90deg) translateY(-100vh);
  transform-origin: top left; 
  display:flex;
  flex-direction: row; 
  
  width: 600vw;
}

In this case we need to change the transform rotate property to positive 90 degree instead of negative 90 degree. and translate to ‘Y’ axis by -100vh.
Lets set the display property to ‘flex’ and flex direction to ‘row’.
Here is one thing to keep in mind. if you use 6 section in your website the width will be 600vw. If you use 5 then width will be 500vw. For 7 it will be 700vw.

Now for our section class (that means for every sections) lets give them a width and height.

.section{ width:100vw; height:10vh}
Almost perfect. But as you can see we have a scroll bar on top of the site. We need to hide it any how.
So we need to use prefix in for different browser. so lets add it to elementor inner div
.elementor-inner{
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;
}



For chrome add this.
::-webkit-scrollbar{
display:none
}

Finally we are done. So here is the full Codes
.elementor-inner{
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;
}

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

.section{ width:100vw; height:10vh}

::-webkit-scrollbar{
display:none
}
As the website wont look good in mobile we will set these CSS only for Desktop view.
@media screen and (min-width:992px){
.elementor-inner{
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;
}

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

.section{ width:100vw; height:10vh}

::-webkit-scrollbar{
display:none
}

}

So now the horizontal scroll will only work for device which has bigger screen than 992px. You can set any design screen size if you wish.

Share this post

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest

This Post Has One Comment

  1. Really interesting. Thank you

Leave a Reply

Close Menu
This website uses cookies to provide you with the best service. By using our website, you agree to use the cookie. Learn More