Menu / sub menu background on mobile

Hi all,

I have edited the menu using custom CSS, and when I view on desktop with scrren size compressed to simulate mobile it is showing correctly in blue, but when I view on an actual mobile device I can’t get the background color to change from black.

The website is http://roseheron.com. I am trying to make the mobile menu and sub menu background the same blue that is on the desktop menu background.

Can anyone assist please?

Thanks!

Hello there,

Try this CSS code:

    #mainnav-mobi {
      background-color: rgba(0,40,104) !important;
    }  

and add it to Appearance > Customize > Additional CSS from dashboard.

Regards,
Kharis

Hi I have tried this code already and while it does work when viewing responsively in mobile format on a desktop, it still shows as black on actual mobile devices. Is there something related to user agent that could be causing this?

Also, the borders between the mobile menu items are still showing as black on the mobile version when viewed as mobile viewport on desktop. Additionally, is there a way to make the mobile menu sticky with the same slide and transparency effect as the desktop menu?

Thanks in advance!

Hello there,

The applied site cache might stop new code addition to take effect. Please clear it first.

https://codex.wordpress.org/I_Make_Changes_and_Nothing_Happens

Regards,
Kharis

Hi I have cleared all caches but still showing as black on mobile

Try flushing the cache from WP Super Cache plugin’s settings and disable script minification.

Regards,
Kharis

Ok I did all of that with no joy. I also deactivated all caching and optimization plugins also to no avail. I fee like it must be some kind of user agent issue, because it appears correctly when viewed on my laptop with screen minimized.

Hello there,

What will happen if you disable WP Super Cache plugin?

Regards,
Kharis

I did that too. I disabled WP Super Cache and Autoptimize. See above image where it’s working on laptop with viewport shrunk. If it were a caching issue I would imagine if would affect that too.

Hello there,

Viewing the source code cache and script optimisation are still active.

Regards,
Kharis

Hi yes they had been reactivated after checking to see if they were affecting it. I have now deactivated them again if that helps.

Hello there,

I think you should add the below CSS code to Appearance > Customize > Additional CSS from dashboard.

    @media only screen and (max-width: 1024px) {
      .site-header,
      #mainnav-mobi {
        background-color: rgba(0,40,104) !important;
      }
    }

Let me know how it helps.

Regards,
Kharis

Hi I tried that line of code but still not working. Any other ideas what might be causing this?

Hello there,

Some servers might have active server caching. https://codex.wordpress.org/WordPress_Optimization/Caching#Server_Caching

I’d recommend you contact your web hosting support department to help verify it.

Regards,
Kharis

Hi I have checked with host and there is no active caching. Again though, I’m not sure how it could be a caching issue when every other change I have made to the CSS has gone through, and again, it is showing correctly on desktop with screen compressed down to mobile size. I’m at a loss as to what might be going on unless it is directly related to user agent.

@kharisblank any other ideas?