Horizontal Scrolling Code

Add this to the Advanced Tab of the Page Settings. Click the Bottom Left Cog, and then add.

display: inline-flex;


width: 100px;

overflow-y: hidden;
overscroll-behavior-y: none;

@media (max-width:768px){
display: block;

And then – go to WordPress > Elementor > Custom Code, and add this.

Ensure the Location Dropdown is changed to be <Body> – End

Publish it to be on the Singular Pages where it should be applied.

<script type="text/javascript">
function replaceVerticalScrollByHorizontal( event ) {
  if ( event.deltaY !== 0 ) {
   window.scroll(window.scrollX + event.deltaY * 2, window.scrollY );

 const mediaQuery = window.matchMedia( '(min-width: 770px)' );

 if ( mediaQuery.matches ) {
  window.addEventListener( 'wheel', replaceVerticalScrollByHorizontal );

Share on facebook
Share on twitter
Share on linkedin
Share on email
Share on whatsapp

Join our Mastery Membership

Group Support, Private Facebook Group, and Site Reviews.