5/5

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 😀.

By Aires Dagraca

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.

Related Articles

How To Turn A Section Into A Carousel

Greeting All, In this tutorial I am going to show you how you can turn a one column section in a carousel slider you can be proud of. Here is what you will be creating. Responsive and functional carousel. There…

How To Wrap Text In Elementor

Greetings All. This brief tutorial will touch on a subject I was asked about this week concerning a simple way of wrapping text around an image. So after some experimenting and trying multiple methods this is the solution I found…

How to Create A CSS Arrow

Greetings All, For this brief tutorial I will show you how to create a css arrow that can be attached to a widget, column or div. The process shouldn’t be overly confusing but if you have any issues please feel…

Leave a Reply

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

Become a Premium Member and get full access to exclusive courses and templates.

Key Elements provides a unique collection of tutorials, tips, & courses for Elementor Theme Builder. From advanced to basic tutorials we have something for everyone.
Share on facebook
Share on twitter
Share on linkedin
Account
  • Privacy Policy
  • Terms & Conditions
Pages
  • Articles
  • Resources
Important
  • About
  • Contact
Key Elements provides a unique collection of tutorials, tips, & courses for Elementor Theme Builder. From advanced to basic tutorials we have something for everyone.
Share on facebook
Share on twitter
Share on linkedin
Account
  • Privacy Policy
  • Terms & Conditions
Pages
  • Articles
  • Resources
Important
  • About
  • Contact
©2018 - 2020 Key Elements, All Rights Reserved
newsletter

Subscribe to get notified and receive a special invite.

Feedback
Powered by Elementor Pro

How happy are you with Key Elements?