What are you trying to accomplish
e.g. I want to build a multi-column, full-width mega menu using the visual editor
I’m a UX designer and my design team is still familiarizing themselves with the visual editor. We found tutorials on how to add simple drop downs to navigation links, but we are not sure how we would build a multi-column full width mega menu with category columns and images. Is this something that is possible to build in the visual editor?
Here is an example:
Hi, so I made a video explaining the logic of how to get overlay menus to show on hover. Basically when the mouse enters the title area such as “Men” you can have an element event on that element that sets “state.showMenu = true” (or whatever name you want to pick for it) and then set the menu’s Element Data Bindings to Show if “state.showMenu”. I made the title and the menu itself contained inside of a box and positioned the megamenu with absolute positioning. You can add columns and images just as you would in any other part of the visual editor.
Let me know if this is what you’re looking for or if you have further questions or need more clarity.
Thanks,
Andreas
Customer Engineer @ Builder.io
Hey thanks so much! I shared the video with my team. This should be helpful.
Hi Andreas, I have a question on how you setup the styling on the header links. How did you set those up so that they overflow below the header (to make room for the menu overlay)?
Hmm not 100% sure what you’re asking but to make the menu appear below the header links I used the css “position”: “absolute” and used the css property “top” to move the menu down.
As far as making the links appear horizontally across the page I used “inner layout” → “row” in the visual editor.
Let me know if this is unclear or if its not what you were asking! Hope that helps.
Sorry for any confusion, I meant for the MENU that appears on hover to be absolute positioning, not the links. First, remove the position: absolute from the links. Then select “Level 1 Categories” in the layers tab on the left. Go to the style tab on the right, then under inner layout choose “row”. That should put all the links in a row.
Hi! I thought it would be easier to make a quick loom video so I can show you the issues I’m having: Loom | Free Screen & Video Recording Software | Loom
Hey Alex,
Maybe try width: 100vw on the menu overlay? and then adjust css from there.
Looks like you didn’t have the permissions necessary to edit the mouseOut events but I would double check that the only time state.showMensMenu (or whatever the correct name was) is only being set to false on the mouseOut event or the parent element. Make sure theres no other mouse out events, and it could also be worth putting a mouseIn event on the menu overlay that sets the state.showMensMenu value to to true as well if there isnt one already. I know its been a bit since your last message so you might’ve solved this already, I wasn’t able to find the exact page in your space to test it.
The other thing I’d say is sometimes you have to test the hover functionality on the URL itself or the preview instead of in the visual editor.
Hopefully these tips are helpful 
Hey Andreas, this worked! Thank you.
Great video! How would you proceed to make the menu reusable across all pages without have to recreate the menu on each page?
You can turn the menu into a symbol: https://www.builder.io/c/docs/symbols-intro
Then you’ll be able to pull it into any page you need and it will stay updated with the parent symbol in all locations.
