Dropdown Menu Always Visible

SOLVE
Highlighted
Regular Contributor

Test page with Test menu > https://portal.collabrance.com/test 

 

Screen Shot 2020-07-17 at 3.01.03 PM.png

 

As you can see, the child items are always visible, the horizontal and vertical spacing of the parent items is incorrect. And the styling of the drop down is incorrect. Should look like: 

 

Screen Shot 2020-07-17 at 3.02.40 PM.png

 

What am I missing? I'm thinking the header module isn't picking up the styling or JS, but I can't tell why. Note, I didn't make/design this, so I'm trying to figure it out.

0 Upvotes
1 Accepted solution

Accepted Solutions
Highlighted
Solution
Regular Contributor

Alright, here's an outline of our issue and what I did to solve. We had a custom Header module that we moved to a second domain. During that process, the main navigation menu didn't appear anymore. One of my teammates got the menu to appear eventually, but when we went to add child items, the dropdown function wasn't working.

 

Here is the code that set the menu for the original Header module: 

 

{% set mainMenu = menu(widget_data.controls.change_header_main_menu) %}
<span class="hs-menu-wrapper">
<ul>
{% for first in mainMenu.children %}

My teammate change it to: 

 

 

{% menu id="{{ widget_data.Controls-1587388426226-11462845861796415.change_header_main_menu }}" %}        	
<span class="hs-menu-wrapper">
 <ul>	
  {% for first in mainMenu.children %}

As you can see, they removed the "set" function in the code, which I discovered broke the "mainMenu" variable below  that controlled the child menu items.

 

 

When I updated the second example to match the "set" example in the first module, I got an error because I can't have hyphens in the module name.  I cloned that controls module, renamed it, then updated the header module.

 

 

 {% set mainMenu = menu(widget_data.Controls_JW.change_header_main_menu) %}        	
<span class="hs-menu-wrapper">
  <ul>	
     {% for first in mainMenu.children %}

Now, the menu is still not working at this point. 

 

 

Then I learned about "export_to_template" and realized my next step. I needed to update the "additional head markup" and "Wrapping HTML" on my page template.

 

So that's what I did. I added this code to my "Additional head markup" 

{% module "Controls_JW" module_id="32648989754" label="Settings & Controls JW", no_wrapper=true, export_to_template_context=True %}

Then I clicked on my header module in the template, and added the below to the "Wrapping HTML" code section.

{{ widget_data.controls_JW.change_header_main_menu }}

And now it works!

 

I'll leave the test page / example up. Note, anyone else won't be able to click on any links since the rest of the site needs registration to view.

 

Cheers!

John

View solution in original post

6 Replies 6
Highlighted
Regular Advisor

Hi @jwiedenheft ,

 

I cant see this link, for me need password and login. You can use the other option for private page in HubSpot, and only need passwords that you define in settings of page. 

 

Can update this page with this condition and send the password to we can open? 

 

I'm waiting.

Thanks! 🙂

0 Upvotes
Highlighted
Regular Contributor

Forgot about that. Removed the login requirement since it's only a test page. The links in the menu won't work, but the page should be visible.

0 Upvotes
Highlighted
Regular Contributor

@DanielSanchez Were you able to look at this? Much appreciated if you do!

0 Upvotes
Highlighted
Regular Contributor

I was able to solve this. Will hopefully post the solution shortly.

Highlighted
Community Manager

@jwiedenheft, glad you figured it out! 

 

Would love for you to throw your solution up here so others can learn from you! 

Thanks,

Dennis


We are excited to announce that the Community will be launching a weekly newsletter on November 2, 2020!
Sign up today!
Highlighted
Solution
Regular Contributor

Alright, here's an outline of our issue and what I did to solve. We had a custom Header module that we moved to a second domain. During that process, the main navigation menu didn't appear anymore. One of my teammates got the menu to appear eventually, but when we went to add child items, the dropdown function wasn't working.

 

Here is the code that set the menu for the original Header module: 

 

{% set mainMenu = menu(widget_data.controls.change_header_main_menu) %}
<span class="hs-menu-wrapper">
<ul>
{% for first in mainMenu.children %}

My teammate change it to: 

 

 

{% menu id="{{ widget_data.Controls-1587388426226-11462845861796415.change_header_main_menu }}" %}        	
<span class="hs-menu-wrapper">
 <ul>	
  {% for first in mainMenu.children %}

As you can see, they removed the "set" function in the code, which I discovered broke the "mainMenu" variable below  that controlled the child menu items.

 

 

When I updated the second example to match the "set" example in the first module, I got an error because I can't have hyphens in the module name.  I cloned that controls module, renamed it, then updated the header module.

 

 

 {% set mainMenu = menu(widget_data.Controls_JW.change_header_main_menu) %}        	
<span class="hs-menu-wrapper">
  <ul>	
     {% for first in mainMenu.children %}

Now, the menu is still not working at this point. 

 

 

Then I learned about "export_to_template" and realized my next step. I needed to update the "additional head markup" and "Wrapping HTML" on my page template.

 

So that's what I did. I added this code to my "Additional head markup" 

{% module "Controls_JW" module_id="32648989754" label="Settings & Controls JW", no_wrapper=true, export_to_template_context=True %}

Then I clicked on my header module in the template, and added the below to the "Wrapping HTML" code section.

{{ widget_data.controls_JW.change_header_main_menu }}

And now it works!

 

I'll leave the test page / example up. Note, anyone else won't be able to click on any links since the rest of the site needs registration to view.

 

Cheers!

John

View solution in original post