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.

image

Start point

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

1 - No Wrap

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

2 - overflow auto

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

Result:

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:

https://www.w3schools.com/howto/howto_css_menu_horizontal_scroll.asp

1 Like