Is there a way of hiding the elements that are set to show once my Menu Icon has been clicked? I can’t imagine complex sites with various elements hiding and showing would all be showing every single element at once, although now that I have said that there may be no way of showing it to change the design so this could be why it always shows.
That’s totally doable! You can absolutely do what you are talking about. You can set the object to be Display: None in the designer remove the first Hide/Show step for the interaction and it will work properly
I recorded the video below to show you the steps I took. Sorry no audio on it I was in a crowded room. But I hope it helps
So… what I’ve learned is that even though an element’s display properties is set as: None an Interaction will still override the setting. Good to know.
Since you were able to solve this problem I have another question that relates to the same Element/Interaction.
The navigation I have created for Mobile is purely a re-skin of what is used for the desktop site, in fact it’s hardly a re-skin because it’s fairly basic. But it is different.
As you know the mobile navigation is hidden on desktop and the desktop navigation is hidden from the Tablet breakpoint and below.
My question/observation is that when I use the site on desktop and reduce my window width to go into tablet view and I enable the navigation if I were to leave it enabled and expand my window again the mobile navigation (that should NEVER be visible on desktop) is now visible. How can I allow the elements inside the Mobile Navigation to NEVER show on desktop even though the wrapper display settings is set as: None.
I realise that the end user will probably never expand their window once they have opened the menu but I don’t want the opportunity to arise were the website shows a visible problem like this, it’s just messy.
Thanks heaps, I look forward to hearing your response.
I think I solved it! Check out the attached video. So basically your mobile nav links are still showing because they are set as inline block. Set them to display none on Desktop and then put them back to Inline Block on Tablet, Mobile - Landscape, Mobile - Portrait.
Thanks for recording the videos, they’re really helpful.
It’s now solved. One problem though, which I did fix myself thankfully…
I changed the display options of the wrapper though the invisible space was still somehow being taken into account and it moved the desktop navigation and logo to the left (as shown at the end of your video). I tried hiding the text inside the wrapper but it resulted in the same thing.
In order to get rid of any position override I set the desktop element to fixed, and because it’s invisible it doesn’t matter.
I appreciate the effort and thought you’ve put into solving the problems!
Seeing as you already have the link to the site do you see any reason why the transition doesn’t play more than once on the live site? The second time and every one following is a hard cut.
I’ve also experienced with the ‘click for more’ interaction that it doesn’t reset and play/move again if it hasn’t finished it’s 2nd animation sequence, and rather moving it x amount of px it hard cuts to the 0px state (the same as no hover at all).
@Kalan hmmm… not sure. It may be something with the Hide/Show actions. Because they can’t have a duration/easing added to them in your current interaction. Maybe try using opacity and then once moved back hide it. I know it’s an extra step.
