Navbar: Grey Pressed State in iOS

Design help General
1

Hey guys,
Been digging into the new Navbar widget, really enjoying it so far though I’ve come across an interesting effect (bug?) that I could use help in solving.

When in preview mode, when pressing the hamburger icon button (or any nav link included in the open menu), I get a strange grey background color flashing within my button just before the action takes place. It’s similar to the default hover color that the Navbar has for the hamburger icon, though I can find no way to get rid of it. I thought it might be a default artifact from the “pressed” or “focused” states, but I added a white fill color & it’s still there.

If you have fast internet it might be hard to notice unless you click the hamburger icon a bunch of times, but it’s pretty obvious when testing on a phone (the only devise in which I’ll be using the open menus).

Any ideas? Thanks!

2

Hey @Todd, that’s definitely the Nav Menu button “Open” state.

If you select this button, then open the nav menu (in the designer), you can style this using the Open state as shown below:

|80%xauto
|80%xauto1522×750 143 KB

Give that a try and let us know how it goes!
-Dan

3

Hey @danro - thanks for the quick response but I’m not sure this addresses the issue. As you can see in the image you posted - everything is styled & I’ve gone so far as to add a fill color of white to all the states of all the buttons in open state. There’s no default/grey fill color in my button styles (that I know of) so I don’t think it explains the mysterious grey “ghost” color artifact that appears after a button is pressed.

Again, it’s been easier to see on a physical phone’s browser (I’m using iOS 7/ Safari) - it’s clearly there when it shouldn’t be. Am I missing something?

4

Sorry for the confusion. In the image I posted, it was me who set the new background color :wink:.

If you set yours to match the screenshot, it should fix the color.

-Dan

5

@danro nope, still has a grey fill flash on every button after pressed. Viewable on both phone horiz & phone vert. Even cleared phone history & cache. It still looks like a bug to me.

Can you show me a screenshot of a button(s) in my designer that currently has a grey fill? Maybe I’m missing something obvious…

6

It looks like you’ve fixed the Open state, but it sounds like you’re talking about the native touch highlight on iOS.

This is a native behavior of all <a> links on iOS devices. You can remove this touch highlight by adding the following CSS to your custom code in the <head> section:

<style>
.w-nav-link {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  tap-highlight-color: rgba(0,0,0,0);
}
</style>

^ This will disable the highlight for the nav links, but you can add other selectors if you like.

-Dan

7

@danro ah-ok. Didn’t know about iOS native highlight. Just for my own education, if it’s an iOS highlight why would it show up in webflow preview mode?

I added the .w-nav-link code in the <head> section but there’s no difference in the highlighting - it’s still there. I can see the code load in the browser before it’s finished loading the header.

Thoughts?

8

Sorry, the code should be in a <style> tag. I’ve updated the snippet above.

9

@danro ah, lol - I should have caught that myself - it’s working perfectly now.

Dude, thanks so much for taking time to walk me through this - I know it’s a minor issue but I’m a super-perfectionist-designer-type :blush:

You kick so much ass man, thanks again :beers:

1 Like
10

Hey @danro - I’m having the same issue, except when I added your supplied ‘style’ code to the ‘custom code header’ - it basically did nothing.

Once I hit tablet portrait and the navbar appears, everything works perfect except for that grey “hover / select” state that is coming from nowhere, I can’t for the life of me find it. even if I take out my classes and try to go to bare bones, I still can’t find it. (p.s - dont ask me to strip my classes again - it was hard enough getting them back in the right nested order :S)

Any help here would be appreciated.

I have the hamburger icon floating to the left, instead of it’s default right hand side - would that cause any issue you think? Again, I can’t see anywhere why it would.

Thanks.

AV

11

Also, I’m unable to locate the ‘open state’ of the hamburger icon, even when I stripped out my CSS classes as mentioned before.

I do get a ‘current’ default class that isn’t editable, but from the looks of it, ‘current’ means the menu item that is currently active for in-page linking.

12

@V_Man
Sounds odd, please email support@webflow.com with your site’s name, and we’ll help get it sorted out!