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

How To Make A Horizontal Scrollable Divi Menu Module

Nelson Miller Pee Aye Creative
In this tutorial I will show you how to make a horizontal scrollable Divi menu using the Menu module, perfect for smaller screen sizes!
NOTE: This tutorial is for the Menu Module. I do not recommend continuing to use the default header menu. If you insist, you will need to change the selector classes on your own to those of the default header.

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.

Where To Paste The CSS Code

1. Divi Assistant
If you are using our Divi Assistant plugin, simply paste the code in the CSS tab in the custom code window in the Divi Visual Builder.

2. Child Theme
If you are using a child theme, paste this code into the style.css file. If you don't have a child theme, you can generate a child theme directly on your site or download our free child theme.

3. Divi Theme Options Integration
Otherwise, paste this code in your Divi>Theme Options>Custom CSS code box.

If you need help understanding where to paste the code, please check out our complete guide about 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.

Last updated [last-modified %date%]

Subscribe

Each month we send out a roundup email newsletter with the latest tutorials, product updates, helpful resources, and any other industry or personal news. Occasionally we send an extra separate email here and there if we just can’t wait! So that’s what you will get if you subscribe, and you can always unsubscribe at any time if you just can’t take it anymore :)

Blog Post Optin

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.

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

23 Comments

  1. MUHAMMAD yasir

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

    Reply
  2. Jose Antonio Lopez Moreno

    Dear Nelson
    Many thanks for this amazing piece of content. Really appreciated. I was trying to imitate that same style as Amazon website and with this tutorial I made it after trying so many options.
    Thank you again!!

    Reply
  3. Kathryn

    Love the scroll for the “Menu Module”. Is there a way to use an arrow icon ie as a visual clue that there is more menu to scroll to?

    Reply
    • Hemant Gaba

      Hey Kathryn,

      It’s a good catch, we will work on this little visual clue arrow and will get back to you on this shortly.

      Reply
      • Claudio

        Hey, thank you for this tutorial.
        Is the arrow to be inserted ready? 🙂
        Without an indicator it is not clear that there are elements to scroll

      • Hemant Gaba

        Hey Claudio,

        Could you please share the URL of your website so I can check the code and provide it to you?

    • Martin

      Hi! That would be a great addition to the horizontal scroll menu.
      Would love to hear how to add that.

      Reply
  4. Piterk

    Hey, thank you for the tutorial. I am also interested in the arrow solution, can you send the code for me as well?

    Reply
  5. SB

    Thank you for this tutorial. I am also interested in the arrow solution, can you send the code ?

    Reply
  6. Tom Vallone

    Hi Nelson! Thanks a lot…Is there a way to use an arrow icon ie as a visual clue that there is more menu to scroll to?

    Reply
    • Hemant Gaba

      Hi Tom!

      Please add the following code for the arrow icon on tablet and mobile view:

      @media all and (max-width:980px){
      .pa-horizontal-scroll-menu .et_pb_menu__menu ul.et-menu:before {
      content: “\24”;
      right: 0;
      position: absolute;
      font-family: ‘ETmodules’;
      top: -18px;}
      }

      Let me know how it goes!

      Reply
      • karin

        Nelson – THANK you so much for all your helpfull info! Please asssit – I cant code to save my life so am following your instructions step by step. I have added the code to add the arrow icons, but nothing seems to appear?

      • karin nieuwoudt

        I cant code to save my life so am following your instructions step by step. *I have added the code to add the arrow icons, but nothing seems to appear?* – no arrows appear to the left and right of the menu?

      • Hemant Gaba

        Hi Karin!

        Can you please share the URL of the page to investigate further?

  7. Nathan

    I am getting side-scroll on the page when using this snippet. I’m a noob, please forgive silly questions, any help appreciated.

    Reply
    • Nathan

      Fixed it, I had messed up the rows.

      Reply
  8. Jérôme

    Hello and thank you for the code! This is exactly what I needed 👍
    Can we have small vertical separation bars between each menu item?

    Reply
    • Hemant Gaba

      Hi Jerome!

      Please add the following code:

      .pa-horizontal-scroll-menu .nav li a{
      border-bottom: 1px solid #000;
      }

      .pa-horizontal-scroll-menu .nav li{
      padding-bottom: 5px;
      }

      Let me know if it helps!

      Reply

Submit a Comment

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

Recent Posts

0

Your Cart