How to add a mega menu.

I am new to Hubspot and learning as much as I can as fast as I can, but the design team would like to add a mega menu for the navigation. I could do this using straight css, javascript and html, but they want to be able to manage it in the hubspot settings. I can not find any information on how to do this. I have seen really expensive themes that have it built, but can’t rationalize a $10K purchase just for a mega menu. Are there any resources that I can use to learn how this is done? I am very eager to learn everything I can about hubspot, but I think that I’m learning that there aren’t a lot of developer resources, not like Wordpress anyway.

Thanks in advance.

DC

Hi @Datacorrupt

Looked around and I am not seeing a lot of resources for this which means I have some work.

In the interim, adding @stefen and @Adesignl to the conversation to see if they have some resources or ideas to share

@dennisedson @Datacorrupt probably the simplest way to get a mega menu up is to clone one of the “menu-section” modules from one of the default HubSpot themes which uses the built-in HubSpot navigation. Then, you can add some if statements that check against the menu label or URL for adding images and what not to specific menu items.

Thank you for the help. I did clone the menu and was able to create the mega menu with a little bit of work. So you got me on the right track, thank you. Is there any way to grab the menu module from outside hubspot through the API? We want to use the same header and footer on some external pages and just trying to figure out the best way to do that and it looks like the template api is still under construction would that be the only way to grab it short of just copy pasting the html?

Good afternoon. I know this is an old thread, but I’m looking to do the same thing and struggling a bit to get a mega menu to work. Would you be open to sharing the code you created? It would be greatly appreciated. Many thanks.

Hi @Datacorrupt ,

Yes, there are two ways to build mega menus. You can create as modules, then either store the menu structure as a navigation menu, and use menu() or use HubDB for a fully custom structure.
You can also create a layout first, then add the edit options. Try this code . create the new module put this code and then create the edit options.
Hope this helps!
If we were able to answer your query, kindly help the community by marking it as a solution.
Thanks and Regards.

Hi @Datacorrupt,

by default it’s not possible to display the header/footer outside of hubspot.

the easiest way I’ve come up is to use a jQuery .load with the ID/class of the header/footer but you’ll most likely need to implement the CSS (and js if used) into the external page. Keep in mind that this will have an impact on page speed so I don’t really reommend this. IMO it would be better if you’d recreate the look&feel on the external page directly.

best,

Anton