The menu flyout is already open. Which it shouldn’t be, as it’s not set to be at its initial state. To get it to work as it should you need to click ‘Next’. Then it will show you this page:
Now the menu works as it should, but the sliders don’t work when you click them at all. I have two crucial questions.
1: How do I get this menu to work as it should on initial state. So it should be closed, and on hover over ‘Valluga Concierge’ it should open. Annoyingly it works perfectly on preview, but not when you navigate to it from the case studies page.
2: The slider arrows have stopped working since implementing this menu flyout. I believe this is because the Z-index on the menu wrapper is set to 99. When I set that to 0 the arrows work again but the menu disappears completely. I’ve highlighted the arrows in the picture above. I need them to work together, not one or the other.
3: Bonus question: If you click ‘how we work’ it will take you to the ‘about us’ page. I have set up an accordion menu, to get this to work you have to click ‘how we work’ again. it’s almost exactly the same issue as the flyout menu on my case study page. It works when i preview it, but when i navigate to the page from any other page it’s not set to closed on inital state, even though it is. FML.
I’m not sure if this will fix everything… But, the reason that the arrows aren’t working is because the “menu-wrapper” element is on top of everything else. It acts like invisible barrier that doesn’t let you click on the arrows.
So, the initial state of .menu-wrapper needs to be set to display none. Then, you need to change the animation that opens the flyout so that the display property for .menu-wrapper is set to flex.
My problem is now – that both on the case study (valluga) page and the ‘how we work’ page. The animations (flyout menu and accordion menu) are set to open automatically and none of the fuctions work unless i refresh the page. How would I go about changing this so that their initial states are correct?
Hmm. I’m not sure what you mean. I don’t have link for the live site or the webflow subdomain. Try posting that here and I’ll see if I can understand your problem.
Also, for the initial state, you can go ahead and set .menu-wrapper to display none in the designer. That way it’s not blocking the page you might be trying to make edits to. That also might help with your issue?
Oh, ok. I see. I would recommend publishing to the webflow subdomain (you can turn indexing off so that search engines don’t crawl the site). When you’re in the designer, it doesn’t show the site according to the “initial states” set up in animations, but it does on the live site or in preview mode. Hope that helps!
