mobilemenu active parent dropdown link color differs on Firefox & Android Chrome

[WEswift]

When using the mobile menu for the top navigation (the one that appears via the menu icon), when a link parent is hovered (Firefox responsive design view) or active (Android Chrome), that link text color differs. Please see the attached screenshot image for clarification. Basically in Android, that parent link changes to white (which is what it’s child link should change to). Because of this, that parent link disappears against the white dropdown background. This link color should be red – as in the Firefox labelled screenshot. What can I target in custom css to keep this consistent? Thanks in advance!

Attachments:

You must be logged in to view attached files.

[Kyle – SUPPORT]

Hi

This does not happen for me in firefox (see screenshot)

Is there any way I can replicate this without having an android?

– Kyle

Attachments:

You must be logged in to view attached files.

[WEswift]

Hey Kyle,

Yea, Firefox is fine. I don’t know of a way to faithfully replicate the issue without an Android device. There apparently is a Chrome Emulator: http://www.sitepoint.com/use-mobile-emulation-mode-chrome/ – But I haven’t used it and there are differences between this and an actual device.

There’s also a beta plugin called Ripple: https://chrome.google.com/webstore/detail/ripple-emulator-beta/geelfhphabnejjhdalkjhgipohgpdnoc?hl=en

See also Chromium: http://paul.kinlan.me/installing-chrome-for-android-on-an-emulator/

And web app Manymo: https://www.manymo.com/

Maybe those can help?
-Paul

[Kyle – SUPPORT]

It would be helpful if I could view your site without logging in, as I’m checking in different devices/browsers it will save a lot of time if I don’t have to log in

– Kyle

[WEswift]

Kyle – the forced login has been turned off temporarily to simplify testing. Keep me posted. Thanks! -Paul

[Kyle – SUPPORT]

Try adding this to your custom css

#mobile-menu ul li a {
color: #111111;
}

– Kyle

[WEswift]

I’m already using that style declaration in custom css. It’s not being applied in the scenario mentioned.

#mobile-menu ul li a { color: #252525; }

[Kyle – SUPPORT]

Try this, open up the style.css filethat’s in Dante’s root folder, go to line 2572:

#mobile-menu ul li a {
	display: block;
	padding: 10px 15px;
	color: #fff;
}

remove the color property

– Kyle

[WEswift]

Kyle – I didn’t want to modify any core Dante files and break compatibility with theme upgrades. I was able to achieve what I wanted with the following (specifically targeting .menu-item-has-children did the trick):

#mobile-menu ul li a:hover, #mobile-menu ul li a:focus, #mobile-menu ul li:hover > a, #mobile-menu ul li:focus > a, #mobile-menu ul li.menu-item-has-children:focus > a, #mobile-menu ul li.menu-item-has-children:hover > a { color: #CA1014 !important; }

Thanks for the assist.

[Kyle – SUPPORT]

Ok great! Nice work

– Kyle