Streaming live at 10am (PST)

Horizontal Scroll on Mobile Menu

Hey everyone,

I’m currently experimenting with horizontal scroll.
I want to make a menu, which a user can scroll vertically like the one from apple. The horizontal scroll is only applied if the menu does not fit on one screen.

An example can be found here: https://www.apple.com/mac/

And I marked the thing I mean in the screenshot below.

Thanks for your help.


Solution (Mix 1-3 below)

demo: http://site-ae5a37.webflow.io/horizontal

Part A - webflow side

1. Create regular div wrapper
Add class horizontal-scroll-menu. We use this class selector under custom code (Part B).
image

2. Put inside div/link-block "box"
note: In this case, i set fixed width (But if you put text/images inside the box you could use “auto”) + Set display to inline-block

3. Duplicate box X times
The result looks like this:

Part B - custom code side

image

<style>
   /* Create a Horizontal Scrollable Menu */
  .horizontal-scroll-menu{
    white-space: nowrap; /* Never wrap to the next line */
    overflow-x: auto; /* Hide overflow + add scroll */
    overflow-y: hidden; /* Hide overflow */
  }
</style>

Publish ==> Done :slight_smile:

desktop:

important - on desktop no way to scroll by Grab (Without custom JS - example dragscroll.js). Add custom code -or- resize elements on desktop (To avoid scroll ==> like apple example).

Mobile

image

1 Like

How it works?

overflow-x and white-space added only by custom code (CSS before body/head per page/entire site).

1/3. overflow-x

https://www.w3schools.com/cssref/css3_pr_overflow-x.asp

overflow-x: auto;

Should cause a scrolling mechanism to be provided for overflowing boxes

2/3. CSS white-space Property

The white-space property specifies how white-space inside an element is handled. Read more

nowrap Sequences of whitespace will collapse into a single whitespace. Text will never wrap to the next line. The text continues on the same line until a tag is encountered.

3/3. Inline-block

One common use for display: inline-block is to display list items horizontally instead of vertically. Read more

How to create drag-n-drop on desktop:

Before body:

<script src="https://cdnjs.cloudflare.com/ajax/libs/dragscroll/0.0.8/dragscroll.min.js"></script>

Add the dragscroll class to a scrollable element:

image

::-webkit-scrollbar - Hide scrollbar on desktop

Sometimes this is useful.

<style>
   /* Create a Horizontal Scrollable Menu */
  .horizontal-scroll-menu{
    white-space: nowrap; 
    overflow-x: auto;
    overflow-y: hidden;
  }
  /* hide scrollbar on desktop */
 	@media only screen and (min-width: 991px) {
  	.horizontal-scroll-menu::-webkit-scrollbar {
   		 width: 0px;  /* Remove scrollbar space */
   		 background: transparent;  /* Optional: just make scrollbar invisible */
		}
	}
</style>

Publish ==> Done.

Thank you @Siton_Systems
I will try it later

@Siton_Systems Hi Ezra!

Thanks for posting this! I’m trying it right now but am pretty new to code/learning along the way… is there any way you know of to utilize this scroll function on mobile, but keep the box widths constant while incorporating text/images. Essentially, I want all of my boxes to be the same width as the user scrolls through them, but my text is of different lengths, so setting “auto” for the width wouldn’t work.

I think it has to do with the custom code and “overflow” but right now, even though I’ve set a max width for my text, it’s not respecting that… (screenshot attached, though I haven’t filled all the different text… trying to make a timeline eventually!).

Any help would be very much appreciated!
Thank you!
Erin

Thanks for posting this. I was looking for something like this to use in my Collection Pages heavy project where collection 1 category are links you can horizontally scroll through, and then clicking brings to collection page with product types.

1 Like