Fixed submenu for each page

[italoborges]

Hi, 

I have a main menu which has submenus.

The designer made a bit different than usual and I'm having some troubles to figure out how to do this using Design Manager and CSS.

Below what I need to achieve:

Solutions also have a submenu.

I have a data-template which it will be using for these inside pages, also for Solutions.

To be honest I don't have a clue how I could achieve this result.

Does someone have an idea?

[tjoyce]

Looks pretty! but I don't envy you in having to code that up. 

I just want to be clear on the details here. Does each page you land on have a sticky submenu (always showing) that is different for each parent? Or is this just a typical dropdown menu that doesn't change across different pages?

---

tim@belch.io

[italoborges]

Hi! Thanks for your support! hahaha

Just two pages will have this submenu bar below the menu.

I don't think it will be possible to do it. The submenu belongs to a menu link, it has an UL inside of it.

To create the submenu based on the layout, the UL had to be outside the menu, below the header container.

She did the layout way before knowing that we would use HubSpot.

[tjoyce · Accepted solution]

@italoborges

That's okay, don't lose hope, there's lots of creative ways to solve problems in HS using the tools they give you. Here's how I would approach this.

Go to your advanced menu builder and create 3 menus; 1 for the main nav, and 2 for the 2 unique sub-navs. 

Next. Go to the template builder and create a new local custom module. 

Next. Add choice field with 3 options (None, Solutions, DataCenter)

Next. In the HTML/HUBL section, add the following (note: change out the id to match your new submenu ids)

{% if module.sub_menu != 'none' %}
	{% if module.sub_menu == 'solutions' %}
		{% menu "sub_menu_1" id='the_id_of_your_first_submenu', overrideable=False, root_type='site_root', flyouts='false', max_levels='1', flow='horizontal', label='Sub Menu 1' %}
	{% endif %}
	{% if module.sub_menu == 'datacenter' %}
		{% menu "sub_menu_1" id='the_id_of_your_second_submenu', overrideable=False, root_type='site_root', flyouts='false', max_levels='1', flow='horizontal', label='Sub Menu 1' %}
	{% endif %}
{% endif %}

Next. Go back to your template and add the new local module

Next. Create a web page based on that template and when you choose a different menu from the dropdown, you will see the submenus change

Next. Use your CSS skills to make it appear the way the designer intended

---

If this solution helps; please, mark it as solved 😄 tim@belch.io