# Dropdown Menu Always Visible

**URL:** <https://community.hubspot.com/t/dropdown-menu-always-visible/23058>\
**Category:** CMS Development\
**Tags:** navigation, css, javascript\
**Created:** [July 17, 2020, 8:05pm UTC](https://community.hubspot.com/t/dropdown-menu-always-visible/23058 "2020-07-17T20:05:35Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![jwiedenheft](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jwiedenheft/32/32521_2.png) [@jwiedenheft](https://community.hubspot.com/u/jwiedenheft)\
**Post date:** [July 17, 2020, 8:05pm UTC](https://community.hubspot.com/t/dropdown-menu-always-visible/23058/1 "2020-07-17T20:05:35Z")

</div>

Test page with Test menu \> [https://portal.collabrance.com/test](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.

---

<div class="post-metadata">

**Author:** ![DanielSanchez](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/danielsanchez/32/48193_2.png) [@DanielSanchez](https://community.hubspot.com/u/DanielSanchez)\
**Post date:** [July 17, 2020, 8:25pm UTC](https://community.hubspot.com/t/dropdown-menu-always-visible/23058/2 "2020-07-17T20:25:39Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![jwiedenheft](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jwiedenheft/32/32521_2.png) [@jwiedenheft](https://community.hubspot.com/u/jwiedenheft)\
**Post date:** [July 17, 2020, 8:37pm UTC](https://community.hubspot.com/t/dropdown-menu-always-visible/23058/3 "2020-07-17T20:37:39Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![jwiedenheft](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jwiedenheft/32/32521_2.png) [@jwiedenheft](https://community.hubspot.com/u/jwiedenheft)\
**Post date:** [July 20, 2020, 8:52pm UTC](https://community.hubspot.com/t/dropdown-menu-always-visible/23058/4 "2020-07-20T20:52:07Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![jwiedenheft](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jwiedenheft/32/32521_2.png) [@jwiedenheft](https://community.hubspot.com/u/jwiedenheft)\
**Post date:** [July 21, 2020, 8:22pm UTC](https://community.hubspot.com/t/dropdown-menu-always-visible/23058/5 "2020-07-21T20:22:43Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![dennisedson](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/dennisedson/32/28044_2.png) [@dennisedson](https://community.hubspot.com/u/dennisedson)\
**Post date:** [July 23, 2020, 12:24am UTC](https://community.hubspot.com/t/dropdown-menu-always-visible/23058/6 "2020-07-23T00:24:01Z")

</div>

@jwiedenheft, glad you figured it out!

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

---

<div class="post-metadata">

**Author:** ![jwiedenheft](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jwiedenheft/32/32521_2.png) [@jwiedenheft](https://community.hubspot.com/u/jwiedenheft)\
**Post date:** [July 23, 2020, 3:02pm UTC](https://community.hubspot.com/t/dropdown-menu-always-visible/23058/7 "2020-07-23T15:02:26Z")

</div>

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:

```auto
{% 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.

```auto
 {% 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](https://developers.hubspot.com/docs/cms/building-blocks/modules/export-to-template-context)” 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!](https://portal.collabrance.com/test)

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