Streaming live at 10am (PST)

Mega Menu - Problem when designing and editing the website


I have found this great video on how to create a mega menu which I love (Building a mega menu in Webflow - YouTube)! However, because it does not behave like a regular navbar, whenever designing, I need to first make the Nav and Nav Overlay symbol (in the mobile version the Mobile Nav Div and Mobile Overlay symbol) invisible in order to be able to edit the top section that would otherwise be hidden by the mega menu (and the Nav Overlay always because otherwise I cannot change any text on the website). For my collaborators/editors this problem is a bit more severe, as they do not have the possibility to just quickly make it invisible and then convert it back into a block element.

Have any of you encountered the same problem or would generally know how to fix this?

Help would be greatly appreciated, have a great day!

Here is my site Read-Only: Webflow - Floorball Thurgau

When you craft structure containing elements that will become difficultly accessible, you can use th Symbol strategy.

Inside of the divs that you’re using to animate and mask content (the divs with transforms, opacity, display:none, make a div containing all the actual content, and turn this div into a symbol. That can be the content of a mega menu, slides contents, the back of a 3D card… anything that’s cumbersome top edit.

Then you create a utility page that you’ll keep as draft, and on this page you’ll line up all your Symbols. Now you can easily edit the content, and your client too, because clients can access Draft pages in the Editor (also the page doesn’t have to be draft, you can simply add noindex nofollow to the head so it’s not crawled by Google.

1 Like

And welcome to the forum Dominique!

1 Like

Thank you Vincent!

That is a great idea with the draft page! Now an additional question, is there a way to consistently put the symbols as display none during the designing mode but still automatically show it as a block element once its published? I know how to manually do it but was wondering whether there isn’t a smarter way of doing it.

Have a great day,