How to add Scroll bar for sub menu in Avada WordPress theme (Solved)

In this article, I’ll explain how to add a scroll bar for a submenu in the Avada WordPress theme. While researching this topic, I found that many solutions focus on submenus directly, rather than their child elements. My client requested a scroll bar specifically for the child elements of a submenu, which led me to develop a simple solution. Below, I’ve provided the code I used to achieve this functionality. Additionally, I’ve included CSS for two different viewports: one for all viewports and another specifically for laptops. You can easily modify this code for your submenu by using the Google Inspect tool to get the ID of your navigation item.

2 steps to add Scroll bar for sub menu in Avada WordPress theme

1. Open your theme’s Custom CSS section. (https://yourdomain.com/wp-admin/themes.php?page=avada_options)
2. Add the following CSS code: (*This is an example of my project you can modify the code as per your need)

CSS Code:
#menu-item-39145 ul.awb-menu__sub-ul.awb-menu__sub-ul_grand{
top:-150px;
display:block;
overflow-y:scroll;
height:60vh;
}
/* CSS for laptop devices */
@media screen and (max-width: 1366px) {
/* Styles for laptop devices */
#menu-item-39167 ul.awb-menu__sub-ul.awb-menu__sub-ul_grand{
top:-245px;
}
#menu-item-39166 ul.awb-menu__sub-ul.awb-menu__sub-ul_grand{
top:-60px;
}
}