topic Re: Dropdown Menu Always Visible in CMS Development

Dropdown Menu Always Visible

jwiedenheft — Fri, 17 Jul 2020 20:05:35 GMT

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

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:

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.

Re: Dropdown Menu Always Visible

DanielSanchez — Fri, 17 Jul 2020 20:25:39 GMT

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! 🙂

Re: Dropdown Menu Always Visible

jwiedenheft — Fri, 17 Jul 2020 20:37:39 GMT

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.

Re: Dropdown Menu Always Visible

jwiedenheft — Mon, 20 Jul 2020 20:52:07 GMT

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

Re: Dropdown Menu Always Visible

jwiedenheft — Tue, 21 Jul 2020 20:22:43 GMT

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

Re: Dropdown Menu Always Visible

dennisedson — Thu, 23 Jul 2020 00:24:01 GMT

@jwiedenheft, glad you figured it out!

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

Re: Dropdown Menu Always Visible

jwiedenheft — Thu, 23 Jul 2020 15:02:26 GMT

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