How to Create a Scrollable Horizontal Menu in WordPress using CSS (Elementor-Friendly)

Sometimes when building a website, you may want your navigation menu, product list, or category tabs to scroll horizontally instead of wrapping to the next line.

A common approach is to use CSS to force horizontal scrolling on a <ul> (unordered list). However, if you’re working with a page builder like Elementor, you’ll want Elementor to control the styling (colors, borders, padding, radius) while your CSS only handles the scroll behavior.

In this post, I’ll show you:
✅ The original CSS with styling
✅ The clean version (Elementor-friendly)

1. Scrollable Horizontal Menu with default menu style

To let Elementor handle the visual styling, we strip away the colors and only keep the scroll functionality:

selector ul {
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  flex-wrap: inherit !important;
  scrollbar-width: none; /* Firefox */
}

selector ul::-webkit-scrollbar {
  display: none; /* Chrome, Safari */
}

That’s it! 🎉 This ensures your <ul> stays scrollable while Elementor controls all design choices like colors, backgrounds, and borders.

2. Scrollable Horizontal Menu with menu styling

This version applies both scroll behavior and custom styling such as background color and border radius:

selector ul {
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  flex-wrap: inherit !important;
  scrollbar-width: none;
}

selector a {
  background: #408130;
  border-radius: px;
}

selector ul::-webkit-scrollbar {
  display: none;
}

While this works, it hardcodes styles (like background color), which can conflict with Elementor’s design settings.

📱 Mobile-Friendly Tip

If you want smooth horizontal swiping on mobile, you can enhance it with this little extra:

selector ul {
  -webkit-overflow-scrolling: touch; /* iOS smooth scrolling */
  scroll-behavior: smooth;           /* Smooth horizontal scroll */
}

Final Thoughts

By keeping your CSS minimal and functional, you avoid styling conflicts with Elementor while still achieving a clean horizontal scroll effect.

This approach is perfect for:

• Navigation menus
• Product/category sliders
• Tabbed sections