Mega menu opens by default

Hi there

I am trying to build a hide/show mega menu z layer for our website, but I can’t seem to work out why the published link loads the mega menu by default. My interaction works fine but when I try hiding it in the Designer tools and then publishing it, something keeps making it show up when published.

Also, is there a way to create one mega menu that is used site-wide from a persistent menu button? I’ve tried using symbols but it doesn’t seem to work.

Read Only:

Thanks, Daniel

Hi @Svelte,

I’m not exactly sure if it will answer your question but here is the things I noticed.
When designing interactions (show menu and hide menu) you are declaring to initial state.

Initial state is what style should be applied on the live website before anything happen. It can be confusing but it’s actually handy for getting elements out of the way in the designer but be sure that they will be displayed correctly when published.

Your interaction for your menu button should then be

Show menu = initial state menu display hidden and then menu display flex
Hide menu = menu display flex (no initial state as the element already got one in the show menu interaction)

For the symbol you could make a symbol of your left gutter and right gutter it should work as long as you have all the element needed for interactions on every page.

As you menu would probably a constant over your site I would go with a Navigation Wrapper that include the left gutter, the right gutter and the mega menu all together and make this a symbol.
Because these three are fixed position the wrapper will by default be 0px height but will contain everything about your navigation.

I hope it helps.


Thanks for the reply Max.

You answered my questions and provided some handy tips. I realised you need to unlink a symbol for it to be selected within an interaction so that helped with my menu overlay, which is now working!

I will take your advice and duplicate the symbols on other pages. The nav wrapper was not a symbol as I didn’t want it to be ‘sticky’ or ‘fixed’ like the gutters, but your idea was good.

Do you know how to stop the page scrolling behind the mega menu?

Cheers for the help.