CMS Development

jwiedenheft
Contributor

Dropdown Menu Always Visible

SOLVE

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
jwiedenheft
Solution
Contributor

Dropdown Menu Always Visible

SOLVE

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
DanielSanchez
Key Advisor | Platinum Partner
Key Advisor | Platinum Partner

Dropdown Menu Always Visible

SOLVE

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
jwiedenheft
Contributor

Dropdown Menu Always Visible

SOLVE

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

0 Upvotes
jwiedenheft
Contributor

Dropdown Menu Always Visible

SOLVE

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

dennisedson
HubSpot Product Team
HubSpot Product Team

Dropdown Menu Always Visible

SOLVE

@jwiedenheft, glad you figured it out! 

 

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

jwiedenheft
Solution
Contributor

Dropdown Menu Always Visible

SOLVE

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

jwiedenheft
Contributor

Dropdown Menu Always Visible

SOLVE

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