Custom css applied to mobile menu

Hi again,

I'm using GP v2.1.2 and GP Premium v1.6.2 (along with Elementor v2.0.14 and Elementor Pro v2.0.9).

In my menu, I have a custom class for some custom link text -- to use as "headings" to divide a single menu (see the image).

My custom class is nav-section-head and the code I use in my child theme css stylesheet is:

.nav-section-head {
	background-color: #cf4d1d;
}

This works great on the desktop menu (primary nav menu).

But ... on the mobile / tablet -- the background color doesn't change -- it stays in the regular color I've set in the customizer (which is just the default colors).

I've looked through the Documentation and Forums and can't find the CSS I need to use to get this to display okay in the tablet/phone hamburger menu.

I tried using a media query, and also starting it with .mobile-bar-items .nav-section-head -- but no luck.

(I also tried making a hover color change for the desktop by adding a separate css entry for the same custom class with an "a:hover" setting, but no luck there too!)

Can you tell me what CSS I need to make this work on the mobile menu?

In the customiser, when you click the mobile icon (to mimic mobile view), it displays as I would like it -- but not in reality.

For ADMIN -- you can see this under "Packages" on the URL shown in this post.

Thanks,

Dean