How to Create Horizontal Scrollable Menu in Elementor

If you are in a situation where you have to create a horizontal scrollable navigation menu for your mobile layout, then you can follow this tutorial to create a horizontal scrollable menu using Elementor.

You might have noticed this kind of menu in many popular websites, especially news sites, such as NDTV, India times, there are many more out there but it is enough to understand what I am talking about.

With this kind of menu, users can easily navigate to other categories or trending topics.

Steps to Create Horizontal Scrollable Menu in Elementor for Mobile

Step 1: Edit your Header & Add(Create) A Section for your mobile menu

Step 2: Add a “nav menu” widget inside the section.

Step 3: From Advanced > Responsive, enable the toggle for the hide on Desktop and Tablet. With this, the complete section will be hidden when opened on Desktop and Tables, as such will display only on mobile devices(which we need for this tutorial).

Step 4: Set a menu for your nav menu widget, you can create a new menu out of the existing post categories.

Step 4: Give your Navigation Menu widget a class from the advanced tab, for example, .overflowmenu

Step 5: (Optional) Use the below CSS in the Custom CSS option to give a button layout to your menu items

.overflowmenu .elementor-item {
background: white;
padding: 20px;
margin: 10px;
border-radius: 30px;
}

Step 6: Use the below CSS in Custom CSS to enable the Horizontal Overflow with scrollbar

@media screen and (max-width: 768px) { .overflowmenu .elementor-nav-menu--layout-horizontal .elementor-nav-menu {
display: flex;
flex-wrap: nowrap;
white-space: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: -ms-autohiding-scrollbar;
}
}

Step 7: (Optional) Use the below CSS to hide the scrollbar

.overflowmenu ::-webkit-scrollbar {
width: 0; /* Remove scrollbar space / background: transparent; / Optional: just make scrollbar invisible */
}

Congratulations! You have created the Horizontal Scrollbar menu successfully. Now, you can do some other customizations to give it a look and feel that you desire.