Streaming live at 10am (PST)

How To - Horizontal Scroll Menu on webflow

Using a Webflow new CSS property option “Breaking” = CSS white-space Property

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


Start point

Base structure (Div and X inline-block links inside)

1 - No Wrap

Add a class for the div wrapper
Set breaking: No Wrap

2 - overflow auto

Change overflow to auto (If overflow is clipped, a scroll-bar should be added):


Mobile VS Desktop

This UI Pattern works nicer on touch devices.
One option is to change the links to display:block on desktop (regular side menu):

And change to inline-block on smaller screens:

HTML tuturial:

1 Like