Streaming live at 10am (PST)

Drop Down Footer Menu Shift Slightly (Vertically) When Closed


#1

When in mobile mode, when you click on one of the footer links to open the trigger works perfectly and the footer drop down menu opens as it should. However, when it closes the vertical axis for both the top and bottom appears to shift as does the link directly beneath it giving it a jerky reaction. Cannot figure out why as the states do not change at all. Any advice would be greatly appreciated.

https://preview.webflow.com/preview/nexus-sandbox?preview=e18a985a7892c79cc377ceee2b957bc9


#2

Don't seem to get anything strange, what do I do bad? https://v.usetapes.com/wsZVgOyJhG


#3

if you see my video below, you should be able to see the 'hitch' when the accordion closes.

https://v.usetapes.com/Ra0XNlTPNl


#4

Also, what you're doing differently is clicking on the link to close it (which works fine) whereas I'm clicking on the main header (i.e. Shop, About Us, etc...) to close.


#5

Ok I see, I olooked closely and don't get why it jumps.

However I don't understand why the dropdown elements need an interaction to ipen and close. By only passing the list position:relative, I got to design an accordion menu without any interaction there:

http://sab.webflow.io/vertical-2-levels-accordion-menu

When I try to do the same on your site, it doesn't work... maybe you've altered things too much, I don't know...


#6

Vincent,

I was trying to get the links to open smoothly which is why I set the height to 0 initially within the interaction. The accordion you referenced is what I used initially but I wanted to add a bit of animation to get it to open gradually. See example 3 per the link below (click to show / hide content).

Is anyone else able to diagnose this?

http://interactions.webflow.com


#7

Hey @vinnie2727 I believe the jumpy part is happening because you have margin set on the Dropdown Footer Wrapper on both open/closed states. If you remove that margin then it behaves correctly. :smile: Please let me know if that solves is for you.


#8

Ok :smile: Also that trigger is made for easing dropdowns

I used it once for a demo here: http://sab.webflow.io/menu-in-dropdown-menu

The "eased" one is supposed to ease but sometimes it doesn't... I know..


#9

@Waldo that did the trick! Thank you! I can't believe I overlooked that...

Quick follow up question, can you try the footer on an actual mobile in portrait mode? There are a couple of issues that I don't see elsewhere (running Safari and Chrome on an IPhone 6).

  1. When you click one of the footer links it momentarily flashes the link as if a hover / pressed state was set. Let me know if you see this as well.

  2. More importantly, the menu items appear to load twice when you click a footer link (e.g. Shop). It loads, disappears quickly, and then loads again. This doesn't happen in any of the mobile preview modes on my desktop.

Thanks,
Vinnie


#10

did you guys have any thoughts here?


#11

Glad it worked. :smile: I just took a look at your site in both Chrome & Safari on my iPhone 6 running the latest iOS and am only experiencing the issue in Chrome on iOS. Works perfectly in Safari for me. That is strange behavior in Chrome. Let me take a further look and get back to you @vinnie2727


#12

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