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;
}
0 Comments