How to Create a Horizontally Scrollable Menu in Elementor Pro

Overview

This tutorial demonstrates how to build a modern, horizontally scrollable navigation menu in WordPress using Elementor Pro. Rather than allowing items to wrap or compress awkwardly on smaller screens, this technique lets visitors slide smoothly through menu links sideways on desktops, tablets, and mobile devices. The lesson walks through enabling experimental Elementor features (Nested Elements and the new Menu widget), setting up a header container structure, populating custom menu items, and configuring breakpoint and horizontal scroll options. It also demonstrates styling the container and menu items with background colors, borders, and responsive preview checks before publishing.

Introduction and Demo

00:00

The instructor demonstrates how the horizontal scrolling menu operates on different viewport sizes without breaking onto multiple lines.

• Prevents line wrapping for long navigation menus
• Allows smooth side-scrolling on desktop and mobile viewports

Prerequisites and Elementor Feature Settings

00:42

Explains that Elementor Pro is required and demonstrates navigating to Elementor > Settings > Features to ensure the 'Menu' experiment is active.

• Requires Elementor Pro
• Verify that 'Menu' is set to Active under Elementor Features

Opening Theme Builder and Adding a New Header

01:36

Navigates to Templates > Theme Builder to create a new Header template for the website.

• Open Templates > Theme Builder
• Add a new Header component

Building Header Layout Containers

02:17

Creates parent and nested containers set to full width and vertical layout to hold the site logo and navigation bar.

• Add flexbox containers to define the header structure
• Set layout properties such as width and direction

Adding the Menu Widget and Items

03:06

Inserts the Elementor Menu widget into the layout and adds several items (Home, Blog, News, Downloads) along with their URLs.

• Search for and drag the 'Menu' widget
• Customize menu item labels and destination URLs

Duplicating Items to Demonstrate Overflow

04:41

Duplicates multiple menu items to simulate a long menu and observe default wrapping behavior across tablet and mobile views.

• Duplicate menu items to fill space
• Inspect responsive viewports where standard menus break onto multiple lines

Configuring Breakpoints and Enabling Horizontal Scroll

05:18

Adjusts Menu widget settings by navigating to Additional Settings, setting the Breakpoint to 'None', and turning on Horizontal Scroll.

• Set Breakpoint to None under Additional Settings
• Switch Horizontal Scroll to 'Enable'

Responsive Testing and Menu Styling

05:59

Tests scrolling on desktop and resized browser windows, then styles the container with background colors, borders, and text colors.

• Test side-scrolling by resizing browser width
• Add borders and background colors to customize navigation styling

Publishing Display Conditions and Wrap-Up

07:14

Shows how to set display conditions before publishing and mentions where template resources can be found.

• Configure Elementor display conditions (Entire Site, Singular, etc.)
• Publish and save header template