How To Make A Horizontal Scrollable Divi Menu Module Tutorial by Pee Aye Creative

How To Make A Horizontal Scrollable Divi Menu Module

In this tutorial I will show you how to make a horizontal scrollable Divi menu using the Menu module, perfect for smaller screen sizes!

Join the Divi crowd!

Setting Up The Menu Module

The very first and obvious thing to do is to add a Menu module to your layout. The one thing I would note here is that you probably do not want to have any logo image added to this menu. Otherwise, the amount of space needed to see the menu items will not be enough. So just add the menu as it is and do not add a logo. 

Add A Custom CSS Class To The Menu

We do not want this code to affect every Menu module on our site, so we will start by adding a custom CSS class to the specific Menu module that you want to target. Open the Divi Menu module settings and go to the Advanced tab. Got the CSS IDs & Classes toggle. Place the class “pa-horizontal-scroll-menu” in the CSS Class input field.

make a horizontal scroll menu in Divi

Add The CSS Snippet To Your Site

The rest of the tutorial is handled by the CSS code. This step involves copying the CSS snippet below and pasting it into your website.

If you are using our free Divi child theme, place this snippet into the style.css file. Otherwise, place this in your Divi>Theme Options>Custom CSS code box. If you need help, check out our complete guide on Where To Add Custom Code In Divi.

/*diplay the desktop menu on all devices*/

.pa-horizontal-scroll-menu .et_pb_menu__menu {
	display: block !important
}


/*hide the mobile menu*/

.pa-horizontal-scroll-menu .et_mobile_nav_menu {
	display: none !important;
}


/*force the menu to fullwidth to allow for the menu to scroll within it*/

.pa-horizontal-scroll-menu .et_pb_menu__menu {
	width: 100%;
}


/*set the menu to automatically overflow*/

.pa-horizontal-scroll-menu .et_pb_menu__wrap {
	overflow: auto;
}


/*keep the menu items horizontal and avoid stacking*/

.pa-horizontal-scroll-menu .et_pb_menu__menu ul.et-menu {
	white-space: nowrap !important;
	flex-wrap: nowrap !important;
	margin: 10px auto;
}


/*hide scrollbar on IE, Edge, and Firefox*/

.pa-horizontal-scroll-menu .et_pb_menu__wrap {
	-ms-overflow-style: none;
	scrollbar-width: none;
}


/*hide scrollbar on Chrome, Safari, and Opera*/

.pa-horizontal-scroll-menu .et_pb_menu__wrap::-webkit-scrollbar {
	display: none;
}

Code Summary Explanation

You can see each snippet of the code has a comment with a brief explanation of what it does. This should explain it pretty well, but here is a summary of what is happening.

The code is opening up the default mobile hamburger menu and displaying the menu items instead. Then it is forcing the width of the menu to be fullwidth to make space for the menu items to scroll back and forth within it. Then it is setting the menu items to automatically overflow the boundary of the menu. After that, it is making sure the menu items do not try to stack, but remain horizontal inline. Then the last part is simply hiding any scrollbar that may appear.

23

Last updated Oct 19, 2021 @ 4:29 pm

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative in the beautiful state of Pennsylvania. He loves helping small businesses, exploring outdoors, building websites with Divi, and teaching others.

OUR ONCE A YEAR SALE IS HAPPENING NOW!!!

25% OFF all Divi Plugins, Courses, and Child Themes!

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

2 Comments

  1. MUHAMMAD yasir

    Overflow: auto; it hides the dropdown menu.
    is there a solution to that?

    Reply

Submit a Comment

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

Asset 7

Shop Our Divi Products

Plugins • Courses • Templates

Visit The Shop

Divi Adventure Club Product And Course Membership by Pee Aye Creative

Become A Member!

Gain access to everything we offer!

Learn More

Divi Tutorials On YouTube

Our videos have views! Join subscribers and enjoy over video tutorials!

Visit Our Channel

Recent Posts

Pin It on Pinterest

0

Your Cart