Hi all,
I have an animation on my navigation so has a pop-out overlay. The open and close animation on the actual hamburger button works fine as it should (effect on the hamburger icon)
However, the “Home (word)” link within the Overlay has the same ‘Close Nav’ animation as the hamburger but doesn’t do the same thing? It closes the overlay etc, but the ‘X’ does revert to the 3 Hamburger lines and the side nav doesn’t enter either.
I’m stumped? It’s the same animation effect but doesn’t do the same thing. I was wondering if you smart people could give me some guidance.
Thanking you in advance
Anton
https://preview.webflow.com/preview/charm-vertical-slider?utm_medium=preview_link&utm_source=dashboard&utm_content=charm-vertical-slider&preview=de39a593777d83b1b30ed3c68843186a&workflow=preview
The interaction on the nav is using an open/close interaction while the text links are only using a close interaction. You can make a duplicate of your existing close motions, but then you’ll need to include starting positions of the hamburger elements (the positions where they end in the open interaction) Doing this will then move them back to their original position.
Hello, thank you so much for responding. I’ve duplicated the close motion and added the starting positions, however, I still can’t get it to work. It’s probably my understanding. Because the nav is already open and there’s only going to be the first click, in theory there will be no second click, so only I’ve only created new 1st click? Is that correct? But hamburger is still staying as ‘X’ when I click ‘overlay link text’ - Home, when the nav is open, even though in the animation palette I have these returning to original position. Surely I don’t have to duplicate the Hamburger? Arrrrgghh please help.
Shoot, unfortunately with your configuration all navigation links will need to be “first-click” only. Unless you have the skills to include some custom js code to reset the hamburger icon.
Since all interactions take place on one page rather than having links that jump to a new page, the rule is that you can only give the user one way to exit the overlay screen. Right now you have two, and that second click of the hamburger menu is overriding your text link interactions.
There will need to be one hamburger menu positioned on the page, and another on the overlay.
Two other minor things:
-
Close interaction on the text link will have the start duration set to 0 seconds
-
You can set the hamburger and text link elements to have a link cursor, to help with ux
