This is searchable archive of our old support forums, which operated from 2012 - 2016. To find out how to get support for your current theme, please visit our support page.

Menu highlighting on mobile

  • Creator
    Topic
  • #6914
    reekes
    Participant

    This is one of those challenges of trying to find something with Firebug. The thing I’m trying to find only happens when the user is interacting with the page. Making this even more challenging, what I’m looking for doesn’t happen on a desktop but on a touch screen.

    I’ve changed the menu colors, and need to change the highlighting that occurs when the user touches a menu item. This is the feedback they get letting them know which item they’re currently touching. It happens not only for the main items in the horizontal menus, but also appears in the Superfish drop down items.

    What is the CSS responsible for the interactive highlighting of menus while on a touch screen?

Viewing 5 replies - 1 through 5 (of 5 total)
  • Author
    Replies
  • #6919
    Jason Bobich
    Keymaster

    Hey reekes,

    Whether hover or active used with mobile devices kind of varies on the link (especially in this case of having dropdowns on the anchor items). So in your case to be safe across more devices I think you can simply style with both :active and :hover pseudo classes.

    http://css-tricks.com/pseudo-class-selectors/

    #access li a:hover,
    #access li a:active {
    	...
    }

    A tip on this — Use Chrome’s inspector over Firebug. I’ve grown very fond of Chrome’s inspector over the last 6 months for reasons just like this. You can actually turn on hover or active for example on an element to see which styles are effecting it for that scenario.

    Click to enlarge

    #6923
    reekes
    Participant

    Sorry Jason, I can’t make sense of your two answers.

    I’ve been stumped by this for days, and at my wits end. Nothing I’ve added to this block ever shows up on my iPad.

    #access li a:hover, #access li a:active { … }

    What I’m seeing in the iPad doesn’t happen on a desktop. So I can’t even attempt to debug this on the desktop world. It’s something I see only in a touch screen. I do see the current menu hilighting and I do see the hover as well. Those I can change.

    What I cannot change is what I find how to change is what I see on the iPad when I touch a menu. It highlights DIFFERENTLY than the hover. It this mysterious behavior while I’m touching the menu. Then when I lift off the screen, it changes to the highlight setting. I’m trying to modify the “touch” behaviour. Where is this defined?

    Lastly, I’d love to know how to “Chrome’s inspector over Firebug” on my iPad. I’m trying to see what’s happening on the iPad.

    The only thing I know about is the Javascript-bookmark hack to get Firebug lite to show up in Safari on the iPad, or using the Safari iPad to Safari desktop remote debugging. Neither of those let me “see” hover or active.

    #6925
    reekes
    Participant

    Sorry, that was hard to read. What I was trying to say:

    What I cannot find is how to change what I see on the iPad as I touch a menu.

    It highlights DIFFERENTLY than the hover. The mysterious behavior is when I’m touching the menu items. This is what I want to change.

    Once I lift off the screen, it changes to the highlight setting I find in hover and the current menu.

    I’m trying to modify the look of the “touch” behaviour. Where is this defined?

    #6930
    Jason Bobich
    Keymaster

    You’re talking about that transparent grey overlay that iOS Safari does as you’re touching the screen? You’re not going to find anything in any inspector for that. That’s just something that the browser does for usability. There’s no real easy way to change that. But if you do some research online there are ways to screw with that if you really want.

    http://css-tricks.com/snippets/css/remove-gray-highlight-when-tapping-links-in-mobile-safari/

    http://alxgbsn.co.uk/2011/10/17/enable-css-active-pseudo-styles-in-mobile-safari/

    http://www.yuiblog.com/blog/2010/10/01/quick-tip-customizing-the-mobile-safari-tap-highlight-color/

    If you’re just looking to do it with CSS, it would be something like this:

    #access li a {
    	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    }

    The above would make it totally transparent, but then you’d set the rgba color value.

    http://24ways.org/2009/working-with-rgba-colour/

    … but this probably isn’t exactly what you’re expecting. You’re basically picking a color and setting its opacity when it sits over the button upon the touch.

    #6932
    reekes
    Participant

    webkit-tap-highlight-color

    That’s what I’m talking about LOL

    No wonder I couldn’t find it.

    Thanks!

Viewing 5 replies - 1 through 5 (of 5 total)
  • The forum ‘The Arcadian Responsive WordPress Theme’ is closed to new topics and replies.