Streaming live at 10am (PST)

Side NavMenu with hover effect wont close on mobile


#1

https://preview.webflow.com/preview/ppink?preview=eb8d3ec7e7fe53e96e8a05fe7e9e3796
The hover menu will not close on phone or tablet.

I'm guessing some code will be needed to make this happen?

If someone could help me with this that would be great.


#2

can you please post your share link, not the published one.


#3

https://preview.webflow.com/preview/ppink?preview=eb8d3ec7e7fe53e96e8a05fe7e9e3796


#4

Hi Cara, not sure what isn't working I tap the buttons on the side menu and they open and close on mobile fine. On a samsung s6 anyway. Also seems to work fine on my old iphone. Hover doesn't exist on mobile really it's more of a tap effect.


#5

I apologize for not explaining myself properly.

On the mobile version, you can click to open the menu tabs, but you cannot close them once you open them.

I added a link to the twitter icon. When you click that menu button the twitter account will open in a new tab. BUT look back at the website and the menu button is still open.. it does not close


#6

it closes by clicking off of it. Elsewhere on the phone. But maybe if you set an interaction for click in addition to hover. That closes the interaction on click.


#7

I tested it on an ipad mini and the tabs do not close. one remains open.

How would I go about setting an interaction which would keep the menu the exact same as it is now but close the tab as you click elsewhere? I'm not sure how to do that. I don't want to spend hours on it if it's really simple. lol


#8

Hi Cara, what version of ios is that ipad mini running? It might be due to that.

I checked on iphone 6s and it was working for me:


#9

The latest version of ios is installed.

Your video did not help because the problem is not opening tabs it is closing them. All you did was click through the tabs. When you click one it opens, when you click another the previous tab closes and the next one opens. Cool!

But do you notice how there is always one tab left open? I want all tabs to be closed. It would be so annoying if all mobile users had one tab hanging open once they clicked on one. They would need to refresh the page to close them (currently) and that is not cool.

I need to allow people to close all of the tabs once one is opened. That's the problem.


#10

Hi @cara, ok, I see what you mean, the behavior is different between Desktop and mobile since the hover effect is disabled on mobile.

I am checking into it further. Thanks for clarifying that.


#11

Thank you so much.

Yes, I should have been more clear. From now on I will make sure I am.


#12

Hi @cara, well the main issue is that the interactions are using a hover interaction and the hover trigger is disabled on mobile, so there is no interaction being fired on mobile.

What you could do however, is to change the interaction from hover to click, and then add a little bit of custom code, that when the user is hovering over the navlink, the navlink is clicked automatically, thus triggering the click interaction.

Here is the code that goes into the Before Body section of the custom code panel in page or site settings:

<script>
$('.nav-link').hover(
  function() {
    $( this ).click();
  }
);
</script>

Here is how to use custom code: http://help.webflow.com/faq/how-to-add-custom-head-and-body-code-to-a-webflow-site

I would try that to get the interactions working on both desktop and mobile. I hope this helps. I think perhaps a good solution for the future (and fone for the wishlist) would be to have an option to have dual behavior on hover interactions, where maybe you could say, specify hover on desktop for an interaction and a click interaction on mobile, maybe a check box for that.


#13

Maybe Dave can correct me. But Cara I think you could place a click interaction in with the hover interaction to the nav links. Following the same procedure as creating the hover interaction but use click instead. Have you tried that? Add a click trigger to the navrollover
interaction.


#15

Hi @jbleroux, yes that probably will work also, I had not tried it. I would be a good thing to try.


#16

I won't be able to add the code for a few days until I upgrade my account.

Not sure how to create the interaction.


#17

Hi @cara, I am still taking a look :slight_smile: BTW, I actually found what might be an issue trying to change the interaction type, where the interactions selection was cut off in my browser, so if you happen to try that, and you get the same behavior, I am already checking into it.

Hang in there, I know it can be frustrating when things don't work quite as you expected. I am here to help.


#18

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.