Enfold 4.1.2 – Style new mobile menu: Current item/page

Hi John,

I have used this bit of CSS on a previous site with the old burger menu set as the main desktop menu (before the burger began to be used as the new mobile menu):

/* to style the active burger menu item */
.header_color .main_menu ul:first-child > li.current-menu-item > a, .header_color .main_menu ul:first-child > li.current_page_item > a {
    color: #12d80c !important;
}

I have tried this on the new burger menu (mobile only) but it doesn’t seem to work. I then tried this:

/* to style the active burger menu item */
@media screen and (max-width: 480px) {
#av-burger-menu-ul:first-child > li.current-menu-item > a, #av-burger-menu-ul:first-child > li.current_page_item > a {
    color: #12d80c !important;
}
}

Still not working. Please could you kindly assist.

Thank you.