Recently, I was given the opportunity to create a giant menu within the HubSpot CMS. It was difficult for me because I had only a few months of expertise in HubSpot CMS development. When I tried to find a solution, I received responses like the following:
"It is not feasible to show the header and footer outside of the HubSpot by default."
Creating a mega menu is not something that can be done easily inside the settings of the platform you use. You need to be familiar with HTML/CSS in order to do so. It was at this point that I made the decision to construct a mega menu in the Hubspot CMS system.
Previously, I had experience working on mega menu development, but not on the HubSpot CMS platform. Now that I have figured it out, I'll show you how to create a giant menu design in the HubSpot Content Management System (CMS) via this blog.
What is a Mega Menu?
Mega menus are a type of expandable menu in which a huge number of selections are presented in a two-dimensional dropdown layout, similar to that of a dropdown menu on a computer screen. They are an excellent design approach when dealing with a large number of options or showing lower-level web pages at a glance, among other things.
When it comes to mega menus, they are often composed of one or more huge panels that are divided into groups of navigation options. The style, font, and, in some cases, icons that are utilized in mega menus assist in organizing the many navigation choices that are made available. Mega menus display everything at once, removing the need for users to browse through the menu structure or click on submenus to go through the hierarchy of options available.
To have a better idea, take a look at the image provided below.
Installing and configuring your Mega Menu
Here is how you can install a Mega Menu onto the HubSpot COS.
Step 1: Unzip the files and go over the documentation in the Documentation folder.
It is possible to map out the features you would like to include in your HubSpot Mega Menu by looking through the documentation folder. The documentation folder will show you all of the choices for the mega menu that are available out of the box.
Step 2: Copy the "main" folder to your hard drive.
While maintaining the original menu in case we need it for reference, this will provide us with a folder that we can alter to get the menu exactly how we want it before putting it onto HubSpot. Consequently, your folder structure will be as shown in the below image:
Step 3: Prioritize your menu items by organizing them first.
The mega menu includes a large number of default navigation items to demonstrate the functionality that the mega menu provides right out of the box. You will want to organize your menu items locally first, either using a text editor such as Sublime Text or a web development program such as Dreamweaver, or whichever you are most comfortable doing it.
So go ahead and open the index.html file located within the "main copy" folder and begin setting up your menu structure as soon as possible. Basic HTML expertise will be required at this point in order to have your menu configured exactly as you like.
Even while it doesn't need to be stylized in the same way that it may need to be on your site right now, you'll want to make sure that all of the menu items and drop-downs are structured before transferring the code into the HubSpot template.
Once you have your menu structure configured locally, your menu is ready to be imported into the HubSpot Content Optimization System (COS).
How to build a Mega Menu Design in HubSpot?
On huge websites, a mega menu may be a very useful tool for keeping things orderly and well-organized. Before I show you how to create a giant menu design in HubSpot CMS, let's have a look at the prerequisites for creating a mega menu design.
To get started, you'll need a well-designed web page layout, as well as a practical understanding of HTML and CSS, among other things. It would also be beneficial if you were familiar with JavaScript. Because we are developing the design using the HubSpot CMS, it would be really beneficial if you were familiar with the HubSpot platform.
You will not be able to access the HubSpot menu at this time. Instead, you'll have to change and manage it in a unique HTML module created specifically for you. With the exception of the requirement to control your primary navigation through this module, this will have no impact on the administration of the website.
Now let us see how to create a giant menu on HubSpot.
The first step is to establish a giant menu on your local computer, which will take some time. This may be accomplished through the use of HTML, CSS, and JavaScript.
- To begin, design the mega menu on your local computer using HTML, CSS, and JavaScript skills in accordance with the layout utilizing the tools provided.
- You may construct a module in HubSpot design tools once the mega menu has been successfully tested on your local system.
- Copy and paste the HTML, CSS, and javascript code into the appropriate section, for example, the body of the document.
- Prepare to construct editable fields in accordance with your layout and HTML structure at this point.
- You just have to copy/paste the words "snippet" or "value only" into the HTML code section of your website.
- Finally, an editable mega menu that is ready to be used. Edit and update your content as needed.
Wrapping it Up
In this blog, I have explained what a mega menu is, how you can install and configure your mega menu for HubSpot Content Optimization System, and also how to build a mega menu designed in HubSpot.
I hope this blog was useful for you. If you are stuck using HubSpot or looking for HubSpot services, webdew’s HubSpot experts can help you out!
Contact us to know more.
Editor: Amrutha
.svg){kind=small}
