Divi Mobile Solutions

How to Adjust Divi Drop Down Menu Size on Mobile

Written by Divi Mobile Team

On December 7, 2019

One thing with a website with a lot of pages is the length of the menu, especially on mobile devices. One way to help fix this issue is control the length the mobile menu drops down.

With Divi the mobile hamburger menu once clicked can drop-down quite a long way if you have over 9 pages. This little trick allows you to control the distance the mobile menu drops down and adds a scroll bar to your menu.

Check out the video below. One thing to keep in mind is how you use the code below. To add the mobile drop down size to your entire site place the below code style tags into the the Divi Theme Global CSS options. You can also do it on a page by page basis by inserting the below code without the style tags into the page CSS options. Or do how I did it, with a code box and leave the style tags in place. You can always play around with the height settings by adjusting the 350px height. Added a webkit to show html color controlled scroll bar for some additonal devices.

CSS In Section Code Box

<style>.et_mobile_menu {
overflow: scroll !important;
max-height: 350px;
}

::-webkit-scrollbar {
width: 12px !important;
}

::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3) !important;
-webkit-border-radius: 10px !important;
border-radius: 10px !important;
}

::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px !important;
border-radius: 10px !important;
background: #41617D !important;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5) !important;

}
::-webkit-scrollbar-thumb:window-inactive {
background: #41617D !important;
}</style>

DIVI Theme Options Global CSS

.et_mobile_menu {
overflow: scroll !important;
max-height: 350px;
}

::-webkit-scrollbar {
width: 12px !important;
}

::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3) !important;
-webkit-border-radius: 10px !important;
border-radius: 10px !important;
}

::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px !important;
border-radius: 10px !important;
background: #41617D !important;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5) !important;

}
::-webkit-scrollbar-thumb:window-inactive {
background: #41617D !important;
}

You May Also Like…

How to Control the Divi Mobile Menu Top Border

How to Control the Divi Mobile Menu Top Border

Adding some color or flare to your divi mobile menu is a nice idea, but what if want to control it on a page by page basis? Yes it is possible with a little bit of CSS. You may even want the whole top border to be gone and not used at all. The CSS is listed below. You...

How To Add Text Above or Below the Mobile Hamburger Menu

How To Add Text Above or Below the Mobile Hamburger Menu

Adding some text below or above the mobile hamburger menu on Divi is really easy to add and edit to your liking.  With the code below simply add it to your Divi / Theme Options / Global CSS and you are done. You can change  the word MENU to anything you like, change...

How to Edit the Global Footer in Divi for Mobile

How to Edit the Global Footer in Divi for Mobile

The one really handy thing with the new Divi Builder is the ability to control the header and footer globally or individually for any situation. The other really cool feature is the ability to show a header or footer by device. You really want to make sure your site...

0 Comments