How to Create a Horizontally Scrollable Menu in Elementor Pro
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…
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.
Section 1: Introduction and Demo
Introduction and Demo • Prerequisites and Elementor Feature Settings • Opening Theme Builder and Adding a New Header
Lesson 1.1: Introduction and Demo
- Prevents line wrapping for long navigation menus
- Allows smooth side-scrolling on desktop and mobile viewports
The instructor demonstrates how the horizontal scrolling menu operates on different viewport sizes without breaking onto multiple lines.
Practical work
- Reproduce the demonstrated step for: Prevents line wrapping for long navigation menus and verify the result yourself.
Lesson 1.2: Prerequisites and Elementor Feature Settings
- Requires Elementor Pro
- Verify that 'Menu' is set to Active under Elementor Features
Explains that Elementor Pro is required and demonstrates navigating to Elementor > Settings > Features to ensure the 'Menu' experiment is active.
Practical work
- Reproduce the demonstrated step for: Requires Elementor Pro and verify the result yourself.
Lesson 1.3: Opening Theme Builder and Adding a New Header
- Open Templates > Theme Builder
- Add a new Header component
Navigates to Templates > Theme Builder to create a new Header template for the website.
Practical work
- Reproduce the demonstrated step for: Open Templates > Theme Builder and verify the result yourself.
Section 2: Building Header Layout Containers
Building Header Layout Containers • Adding the Menu Widget and Items • Duplicating Items to Demonstrate Overflow
Lesson 2.1: Building Header Layout Containers
- Add flexbox containers to define the header structure
- Set layout properties such as width and direction
Creates parent and nested containers set to full width and vertical layout to hold the site logo and navigation bar.
Practical work
- Reproduce the demonstrated step for: Add flexbox containers to define the header structure and verify the result yourself.
Lesson 2.2: Adding the Menu Widget and Items
- Search for and drag the 'Menu' widget
- Customize menu item labels and destination URLs
Inserts the Elementor Menu widget into the layout and adds several items (Home, Blog, News, Downloads) along with their URLs.
Practical work
- Reproduce the demonstrated step for: Search for and drag the 'Menu' widget and verify the result yourself.
Lesson 2.3: Duplicating Items to Demonstrate Overflow
- Duplicate menu items to fill space
- Inspect responsive viewports where standard menus break onto multiple lines
Duplicates multiple menu items to simulate a long menu and observe default wrapping behavior across tablet and mobile views.
Practical work
- Reproduce the demonstrated step for: Duplicate menu items to fill space and verify the result yourself.
Section 3: Configuring Breakpoints and Enabling Horizontal Scroll
Configuring Breakpoints and Enabling Horizontal Scroll • Responsive Testing and Menu Styling • Publishing Display Conditions and Wrap-Up
Lesson 3.1: Configuring Breakpoints and Enabling Horizontal Scroll
- Set Breakpoint to None under Additional Settings
- Switch Horizontal Scroll to 'Enable'
Adjusts Menu widget settings by navigating to Additional Settings, setting the Breakpoint to 'None', and turning on Horizontal Scroll.
Practical work
- Reproduce the demonstrated step for: Set Breakpoint to None under Additional Settings and verify the result yourself.
Lesson 3.2: Responsive Testing and Menu Styling
- Test side-scrolling by resizing browser width
- Add borders and background colors to customize navigation styling
Tests scrolling on desktop and resized browser windows, then styles the container with background colors, borders, and text colors.
Practical work
- Reproduce the demonstrated step for: Test side-scrolling by resizing browser width and verify the result yourself.
Lesson 3.3: Publishing Display Conditions and Wrap-Up
- Configure Elementor display conditions (Entire Site, Singular, etc.)
- Publish and save header template
Shows how to set display conditions before publishing and mentions where template resources can be found.
Practical work
- Reproduce the demonstrated step for: Configure Elementor display conditions (Entire Site, Singular, etc.) and verify the result yourself.
