I am currently utilizing the advanced sidebar menus page which can be accessed through this link:
https://wordpress.org/plugins/advanced-sidebar-menu/
Within the plugin, there are widgets that allow users to add background colors and text colors to child menus.
However, one limitation we have encountered is the inability to add background colors to grandchild menus.
In the following code snippet, we successfully added a background color to the child menu named Purchasing.
Our challenge now lies in figuring out how to add background colors to the grandchild menus Online Content and Hot Items.
If anyone has a solution or workaround for this issue, please share your insights.
We prefer not to make changes directly to the original code as updates to the plugin could potentially overwrite our modifications.
The sample code below showcases the classes used for the sidebar menus:
<div id="advanced_sidebar_menu-8-wrap" data-js="advanced_sidebar_menu-8-wrap">
<ul class="child-sidebar-menu">
<li class="page_item page-item-2867 page_item_has_children current_page_item has_children"><a href="http://departments/?page_id=2867">Purchasing</a>
<ul class="children">
[Menu items within Purchasing menu]
</ul>
<li class="page_item page-item-5125 page_item_has_children has_children"><a href="#">Online Content</a>
[Submenu items within Online Content menu]
</li>
<li class="page_item page-item-5123 page_item_has_children has_children"><a href="#">Hot Items</a>
[Submenu items within Hot Items menu]
</li>
</ul><!-- End .child-sidebar-menu -->
</div>
Here is our attempt at styling the menu items so far:
#advanced_sidebar_menu-8-wrap .child-sidebar-menu .page_item.page-item-2867 .page_item_has_children.current_page_item.has_children .children .page_item.page-item-5125 .page_item_has_children.has_children li a {
background-color: #009B32 !important;
}