[Support request] Custom css applied to mobile menu

[Dean]

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

[Dean]

(Sorry, am not sure if the image worked, as I don’t get a post preview) … the link is:

https://imgur.com/a/TEyQiCb

Thanks!

[David]

Hi Dean, it looks correct to me. Can you try clearing your browser caches.

[Dean]

Thanks David,

I’ve tried that to no avail. Eg, just now, opened in Safari on iPad Mini (haven’t used Safari browser for at least 6 months, never had this site loaded) — still doesn’t show custom background color.

I tried an online emulator (MobileTest.me) and it works fine, however I all “real” mobile devices I have tried don’t show the orange background color.

I have WP Fastest Cache running, I cleared the cache for a particular page, then loading that page URL into another unused browser — still no luck.

In desktop mode, I have the trusty F12 key to inspect what’s going on, but on the smaller devices, no such tool that I know of to have a look and see what may be overriding this CSS setting.

Is there any other suggestion you might have to help find the cause?

[David]

Hi Dean,

it really sounds like a caching issue, can you flush the Cache, and disable WP Fastest Cache?

[Author]

Posts