Mobile Menu Touch Border Radii

kmlucy · 2015-02-14 07:33:59

Hi all,

So I know this is somewhat nitpicky, but at this point I am more curious than anything else. When you touch the menu items on a mobile device (I'm using Android), they show the focus by turning light grey. They also acquire border radii, and I cannot find what selector to use to change that. If anybody has any ideas, I would really appreciate it.

kylelucy.com

Thanks,
Kyle

Matthew · 2015-02-15 16:05:06

I'm not sure what you mean by "acquire border radii" ...

kmlucy · 2015-02-15 23:14:10

Sorry, I should have clarified. Compare the menu when it's inactive:

to when it's being touched:

When it's being touched, it has a border radius that isn't there normally. It is the same effect on the open/close menu button. I have been playing with the selectors for a while, and have tried :hover, :focus, and :active on all the ones I can think of with no result. And I can't seem to find what in the default css is controlling the behavior. Since it is such a minor issue, I am really just more curious about what selector I missed. Thanks.

Matthew · 2015-02-16 16:19:58

Weird.

Try looking for this in your navigation.css file:

    #nav span a, 
    #nav span a:hover, 
    #nav > span:first-child > a, 
    #nav li a, 
    #nav li a:hover, 
    #nav li span, 
    #nav li li a, 
    #nav li li span,  
    #nav > li:first-child > a 
        {
        background-color: #272727;
        background-color: rgba( 39, 39, 39, 1 );
        border: none;
        color: #FFFFFF;
        display: block;
        font-size: 14px;
        line-height: 14px;
        height: 14px;
        margin: 2px;
        padding: 10px 4px;
        text-align: center;
 
        -moz-border-radius: 4px;
        -webkit-border-radius: 4px;
        border-radius: 4px;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        box-shadow: none;
        }

There's a 4px border-radius there, but I'm not sure why it would only be showing up on Android during touch events.

kmlucy · 2015-02-16 22:22:26

I actually have this:

#nav span a, 
#nav span a:hover, 
#nav > span:first-child > a, 
#nav li a, 
#nav li a:hover, 
#nav li span, 
#nav li li a, 
#nav li li span,  
#nav > li:first-child > a,
#nav a:hover
    {
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    border-radius: 0px;
    }
}

in my custom css. I even tried changing those values in the actual navigation.css file to see if the custom css just wasn't taking hold in that case. I can't find anywhere in any of the css files that would be causing the change.
Thanks,
Kyle

Last edited by kmlucy (2015-02-16 22:22:45)

rod barbee · 2015-02-17 00:32:55

Is this being added with javascript? In addition to the border-radius, the button grows(adds a border I assume) and changes to a light grey color that I can't find in the navigation.css file, nor in Lightroom.

It showing up on both my iPhone and iPad.

Not that it matters that much. As Kyle says, it's more of a curiosity than anything, and I don't plan on changing it anyway.

kmlucy · 2015-02-19 02:54:46

I don't claim to be an expert in javascript by any means, but I looked through the scripts and didn't find anything that would explain it either. I also tried inspecting it (simulating a mobile browser) with javascript disabled, and it was still happening.

rod barbee · 2015-02-19 04:12:37

I didn't see anything in the javascript either.
I can emulate the touch events using Chrome developer tools. I can see it happening.

It actually looks like an overlay rather than a change in background-color.
for the a tags inside the nav div I see:

-webkit-tap-highlight-color: rgba(255, 255, 255, 0.498039);
as well as some border-xxxx-xxxx-radius rules

the highlighting is coming from the scaffolding css file:

html {
    font-family: sans-serif;
    min-height: 100%;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0.5);

the border radius is coming from navigation.css, around line 435 under the "Menu on small displays" section and these selectors:

#nav span a, 
    #nav span a:hover, 
    #nav > span:first-child > a, 
    #nav li a, 
    #nav li a:hover, 
    #nav li span, 
    #nav li li a, 
    #nav li li span,  
    #nav > li:first-child > a 
        {

Wonder why that was so hard to find? weird.

kmlucy · 2015-02-19 05:22:05

Actually, it appears that the border radius cannot be controlled. From this site, I found:

The reason ... is that -webkit-tap-highlight-color effectively puts a rectangular background, with a 3px, or so, corner radius, over the hyperlink. It also gives the highlight a padding of about 3px.

I hadn't considered that the radius would be a in-built property of the overlay.

Last edited by kmlucy (2015-02-19 05:43:24)

rod barbee · 2015-02-19 06:53:38

interesting. Looks like you can just set alpha to 0 to essentially disable it if you want.

kmlucy · 2015-02-19 07:33:34

True, but then you would have to replace it with some other way of indicating the touch event.

rod barbee · 2015-02-19 07:47:18

Yep. I may thing about changing the color, but he default fits in fine with my designs so far.

kmlucy · 2015-02-19 10:53:35

In case anyone else wants to change this, I did end up changing mine. I added

a {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-tap-highlight-color: transparent;
    }
    
@media only screen and (max-width: 600px) {  
    #nav span a:active, 
    #nav li a:active, 
    #nav a:active,
    #pull li a:active
        {
        background-color:rgba(255,255,255,.5);
        }
    }

to my custom.css, and added

<script>
    document.addEventListener("touchstart", function() {},false);
    </script>

to my ttg_head_end function in my phplugins so that the :active pseudo selector functions on iOS.

Community @ The Turning Gate

#1 2015-02-14 07:33:59

Mobile Menu Touch Border Radii

#2 2015-02-15 16:05:06

Re: Mobile Menu Touch Border Radii

#3 2015-02-15 23:14:10

Re: Mobile Menu Touch Border Radii

#4 2015-02-16 16:19:58

Re: Mobile Menu Touch Border Radii

#5 2015-02-16 22:22:26

Re: Mobile Menu Touch Border Radii

#6 2015-02-17 00:32:55

Re: Mobile Menu Touch Border Radii

#7 2015-02-19 02:54:46

Re: Mobile Menu Touch Border Radii

#8 2015-02-19 04:12:37

Re: Mobile Menu Touch Border Radii

#9 2015-02-19 05:22:05

Re: Mobile Menu Touch Border Radii

#10 2015-02-19 06:53:38

Re: Mobile Menu Touch Border Radii

#11 2015-02-19 07:33:34

Re: Mobile Menu Touch Border Radii

#12 2015-02-19 07:47:18

Re: Mobile Menu Touch Border Radii

#13 2015-02-19 10:53:35

Re: Mobile Menu Touch Border Radii

Board footer