How to Make A Horizontal Scrollable Mobile Menu

Greetings Everyone,

This short tutorial will shed some light on how to replicate the mobile menu seen on Elementor website. See the image below to see what I am referring to.

My working environment

Theme: Hello Theme

Elementor Version: Pro

Let’s Begin

For this tutorial I will be using the Nav Menu widget with these options.

Activate your responsive mode for mobile and your menu should look something like this.

Now we need to add some css to our advanced > custom css.

selector ul {
    display: flex;
    flex-wrap: nowrap;
    white-space: nowrap;
    overflow-x: auto;

Please note that the above css needs to go in the custom css area of the Nav Menu for it to work properly. If you plan on adding it to your style sheet or customizer you would need to swap out selector for a custom class or id.

The final result:

And there you have it very simple to implement with just a little bit of CSS.

I hope you found. this useful 😀.

Disclosure: Some of the links above are affiliate links meaning at no additional cost to you, I will earn a commission if you click through and make a purchase.

Related Posts

**Responses and Solutions to comments are handled on Sundays & Mondays.

Leave a Reply

Your email address will not be published. Required fields are marked *

By visiting iHeartElementor.com you accept our use of cookies and agree to our privacy policy.
Request A Tutorial

Have a request I would love to hear about.