"Tap" color for 2nd and 3rd level navigation on collapsed Nav

[charliesa]

I have a 3 level menu that has the colors (For active and hover) I want. However, for mobile, I’m not sure how to control the “tap” color on mobile for collapsed navigation. I assume it’s some form of:

a.x-anchor.x-anchor-menu-item.x-active ~ ul.sub-menu{background-color: black};

For “tap” on the 2nd and 3rd level for collapsed navigation, what is the correct syntax?

Url: https://www.bustersvision.org/

[rad]

Hi @charliesa,

Thanks for reaching out.

There is no hover functionality on mobile, it’s either trigger by tap or double tap and usually stylized with focus or custom class. Would you mind clarifying if it’s really a hover styling or just wish to change the background when the sub-menu is open?

Thanks!

[charliesa]

Here is the issue. When I go to the 2nd and especially the 3rd level on Navigation Collapsed for mobile I get a totally white bar when I TAP. I want to change the background color, or even changing the text color would work.

For desktop, when I click on the same link the background still is white, but the text is black (I can read it). For Mobile I can’t read the text.

[paul.r]

Hi @charliesa

To change the background, you can try adding this in Header CSS

.sub-menu .x-anchor {
    -webkit-tap-highlight-color: #fff !important;
}

Hope that helps

[charliesa]

Not sure what you mean, but in the header Navigation for Collapsed, I added the CSS. No change. So I tried changing the color: to #000. The I tried changing the background-color to other than white. Again, no change.

Each time I did clear cache, both my plugin and Cloudflare.

I also added the CSS to my child style.css…same result.

[paul.r]

Hi @charliesa,

Can you provide us a screenshot on how it looks in your end.

I have checked in mobile and the text is visible on my end.

Thanks

[charliesa]

Yes, the text is visible–until you TAP on say “Busters Story” or “Puppy Mill Stomp” under About. This is an example and it occurs on all Mobile Sub links. Then there is a moment when the text is not visible until the actual destination loads. Depending on how fast the page loads, it may be a short time, or may be almost instantaneous. Difficult to get a screenshot.

[paul.r]

Hi @charliesa,

I checked again and can see the issue in mobile.

Would you mind providing us your wordpress admin login in Secure Note so we can take a closer look.

@Themeco1

###Secure Notes

It is very common to need to share sensitive information with our staff such as login or FTP information. In order to keep this private, be sure to use the Secure Note button that you will find at the bottom of each reply.

Thanks

[paul.r]

Hi @charliesa,

To fix the issue, please add the code below in Theme Options > CSS

.sub-menu .x-anchor {
    -webkit-tap-highlight-color: transparent !important;
}

.sub-menu .x-anchor:active .x-anchor-text-primary,
.sub-menu .x-anchor:focus .x-anchor-text-primary,
.sub-menu .x-anchor:active .x-graphic-primary,
.sub-menu .x-anchor:focus .x-graphic-primary {
    color:#000 !important;
}

.sub-menu .x-anchor:focus ,
.sub-menu .x-anchor:active  {  
    background-color:#fff;
}

Make sure to clear your plugin cache after adding these codes.

Thanks

[charliesa]

Thank you very much Paul.R It works perfectly. I dare say if my problem description were better, you guys would have had it fixed much sooner. Once Paul.R drug it out of me, he fixed it straight away. I added the CSS in my Child style.css rather than Theme Options.

Again, thanks everyone

[charliesa]

I changed “Hover” to “Tap”. Sorry.

[paul.r]

No worries. Have a great day!