# Mobile menu not working

**URL:** <https://community.hubspot.com/t/mobile-menu-not-working/129674>\
**Category:** Blog, Website & Page Publishing\
**Tags:** website-pages\
**Created:** [April 10, 2025, 1:42pm UTC](https://community.hubspot.com/t/mobile-menu-not-working/129674 "2025-04-10T13:42:06Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![HBB1](https://avatars.discourse-cdn.com/v4/letter/h/898d66/32.png) [@HBB1](https://community.hubspot.com/u/HBB1)\
**Post date:** [April 10, 2025, 1:42pm UTC](https://community.hubspot.com/t/mobile-menu-not-working/129674/1 "2025-04-10T13:42:06Z")

</div>

Hi all, an old programmer set up a clien’ts website and the dropdown (child) menu is not working on mobile. It works just fine on desktop.

Any idea why? Thanks!

/\* \*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*  
\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*  
This file contains all the neccessary styles to control how your  
menu items appear, including the link and hover effects.  
\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*  
\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\* \*/

.custom-menu-primary .hs-menu-wrapper ul {  
padding: 0;  
margin-bottom: 0;  
list-style: none;  
font-size: 13px;  
}

.custom-menu-primary ul li.hs-item-has-children.clicked ul.hs-menu-children-wrapper {  
display: block;  
}

.custom-menu-primary ul li{  
display: inline-block;  
}

.custom-menu-primary ul li.hs-item-has-children {  
position: relative;  
}

.custom-menu-primary ul li a{  
position: relative;  
display: block;  
line-height: 20px;  
font-weight: bold;  
text-transform: uppercase;  
text-shadow: none;

text-decoration: none;  
}

.custom-menu-primary .hs-menu-wrapper \> ul \> li.hs-item-has-children \> a:after {  
display: inline-block;  
width: 0;  
height: 0;  
margin-left: 5px;  
vertical-align: middle;  
border-top: 4px dashed;  
border-top: 4px solid\9;  
border-right: 4px solid transparent;  
border-left: 4px solid transparent;  
content: “”;  
}

.custom-menu-primary ul.hs-menu-children-wrapper {  
position: absolute;  
display: none;  
right: 0 !important;  
min-width: 208px;  
border: 1px solid rgba(0,0,0,.15);  
border-radius: 4px;  
-webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);  
box-shadow: 0 6px 12px rgba(0,0,0,.175);  
left: auto !important;  
padding: 5px 0;  
font-size: 14px;  
border-top-left-radius: 0;  
border-top-right-radius: 0;  
z-index: 1000;  
background-clip: padding-box;  
}

.custom-menu-primary ul.hs-menu-children-wrapper li a {  
font-weight: normal;  
text-transform: none;  
display: block;  
padding: 3px 20px;  
line-height: 1.42857143;  
}

.custom-menu-primary ul ul li {  
display: block;  
}

.custom-menu-primary ul ul li a:hover{  
background-image: -webkit-linear-gradient(top,#f5f5f5 0,#e8e8e8 100%);  
background-image: -o-linear-gradient(top,#f5f5f5 0,#e8e8e8 100%);  
background-image: -webkit-gradient(linear,left top,left bottom,from(#f5f5f5),to(#e8e8e8));  
background-image: linear-gradient(to bottom,#f5f5f5 0,#e8e8e8 100%);  
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=‘#fff5f5f5’, endColorstr=‘#ffe8e8e8’, GradientType=0);  
background-repeat: repeat-x;  
}

[@media](https://community.hubspot.com/t5/user/viewprofilepage/user-id/83477)(max-width:1199px){  
.custom-menu-primary ul li a {  
padding: 10px 5px;  
}  
}

[@media](https://community.hubspot.com/t5/user/viewprofilepage/user-id/83477)(max-width:991px){  
.child-trigger {  
position: absolute;  
right: 0;  
width: 100%;  
height: 40px;  
line-height: 40px;  
top: 0;  
text-align: center;  
z-index: 999;  
cursor: pointer;  
}  
.custom-menu-primary .hs-menu-wrapper\>ul ul li a:hover {  
background-image: none;  
}  
.header\_\_navigation.header--element {  
margin: 0 !important;  
border-top: 1px solid #ddd;  
}

.custom-menu-primary ul li {  
display: block;  
}

.custom-menu-primary ul li + li {  
border-top: 1px solid #ddd;  
}

.custom-menu-primary ul li a {  
font-size: 16px;  
padding: 10px;  
}

a.header-btn {  
font-size: 16px;  
display: block;  
}

.header-btn-wrap {  
margin: 0 !important;  
padding: 0;  
border-top: 1px solid #ddd;  
}

.mobile-open .custom-header {  
padding-bottom: 1px;  
}

.custom-menu-primary ul.hs-menu-children-wrapper {  
position: static;  
box-shadow: none;  
border: none;  
}

.custom-menu-primary .hs-menu-wrapper \> ul ul li a {  
line-height: 20px;  
padding: 5px 15px 5px 25px;  
font-size: 14px;  
}

.custom-menu-primary ul ul li {  
border: none;  
}  
}

[@media](https://community.hubspot.com/t5/user/viewprofilepage/user-id/83477)(max-width:767px){

}

---

<div class="post-metadata">

**Author:** ![Berangere](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/berangere/32/220784_2.png) [@Berangere](https://community.hubspot.com/u/Berangere)\
**Post date:** [April 11, 2025, 7:01am UTC](https://community.hubspot.com/t/mobile-menu-not-working/129674/2 "2025-04-11T07:01:17Z")

</div>

Hi @HBB1 and welcome, we are so glad to see you here!  
Thanks for asking the HubSpot Community and for sharing the code with us!  
I’d love to put you in touch with our Top Experts: Hi @stefen, @Stephanie-OG and @alyssamwilie do you have suggestions to help @HBB1, please?  
Have a lovely weekend and thanks so much in advance! ❤  
Bérangère

---

<div class="post-metadata">

**Author:** ![PremKannan](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/premkannan/32/14408_2.png) [@PremKannan](https://community.hubspot.com/u/PremKannan)\
**Post date:** [April 11, 2025, 7:27am UTC](https://community.hubspot.com/t/mobile-menu-not-working/129674/3 "2025-04-11T07:27:07Z")

</div>

Hi @HBB1,

The issue is likely that the mobile version isn’t automatically toggling the “clicked” class on parent menu items to reveal the dropdown. On desktop, hover may trigger the display of submenus, but on mobile you need a tap event to add the “clicked” class. Here is a suggestion:

1. **Add a Tap Event Listener:**  
Ensure that clicking (or tapping) a parent menu item toggles the “clicked” class. For example:

2. How it works:

Hope this helps!!

If this answer your query, help the community by **marking it as a solution**.

---

<div class="post-metadata">

**Author:** ![HBB1](https://avatars.discourse-cdn.com/v4/letter/h/898d66/32.png) [@HBB1](https://community.hubspot.com/u/HBB1)\
**Post date:** [April 14, 2025, 1:08pm UTC](https://community.hubspot.com/t/mobile-menu-not-working/129674/4 "2025-04-14T13:08:10Z")

</div>

Amazing thank you! Does it matter where I insert it in the current code?

---

<div class="post-metadata">

**Author:** ![PremKannan](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/premkannan/32/14408_2.png) [@PremKannan](https://community.hubspot.com/u/PremKannan)\
**Post date:** [April 16, 2025, 11:27am UTC](https://community.hubspot.com/t/mobile-menu-not-working/129674/5 "2025-04-16T11:27:45Z")

</div>

Hi @HBB1 ,

Good question!  
Yes, the placement matters for the JavaScript.  
To ensure it works correctly, you should place the script at the bottom of your HTML, just before the closing \</body\> tag. This guarantees that the DOM is fully loaded before the script tries to select and bind events to your menu items.

For example:

\<!-- Your existing HTML and menu code --\>

\<!-- Your custom mobile menu toggle script --\>

\<script\>

document.addEventListener(‘DOMContentLoaded’, function(){

var parentItems = document.querySelectorAll(‘.custom-menu-primary li.hs-item-has-children’);

parentItems.forEach(function(item){

item.addEventListener(‘click’, function(e) {

if (window.innerWidth \<= 991) {

e.preventDefault();

item.classList.toggle(‘clicked’);

}

});

});

});

\</script\>

\</body\>

Placing it here ensures all elements are already rendered when the script runs. Avoid placing it in the \<head\> unless you’re using defer or wrapping it in a DOM-ready check, which you’re already doing.

Hope this helps!!

If this answer your query, help the community by **marking it as a solution**.

---

<div class="post-metadata">

**Author:** ![HBB1](https://avatars.discourse-cdn.com/v4/letter/h/898d66/32.png) [@HBB1](https://community.hubspot.com/u/HBB1)\
**Post date:** [April 16, 2025, 7:03pm UTC](https://community.hubspot.com/t/mobile-menu-not-working/129674/6 "2025-04-16T19:03:28Z")

</div>

Thanks! There are no ‘body’ tags but I added it to the bottom of the code and it’s been several hours and still hasn’t updated …

Some of the text auto highlighted to red - I’m not sure if this means there is an error message?

I really appreciate your help!

 ![Screen Shot 2025-04-16 at 2.54.06 pm.jpg](https://d2qpr2jzcazej7.cloudfront.net/original/3X/f/c/fc30ccf5943afd86fa84fac934df2342f91e26bd.jpeg)

---

<div class="post-metadata">

**Author:** ![Berangere](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/berangere/32/220784_2.png) [@Berangere](https://community.hubspot.com/u/Berangere)\
**Post date:** [May 7, 2025, 2:04pm UTC](https://community.hubspot.com/t/mobile-menu-not-working/129674/7 "2025-05-07T14:04:17Z")

</div>

Hi @HBB1, thanks for the screenshot and thanks @PremKannan for your help!  
Since you are still seeing some errors, I’d love to ask our Top Experts: Hi @PremKannan, @Anton and [@sylvain\_tirreau](https://community.hubspot.com/t5/user/viewprofilepage/user-id/601366) do you have other suggestions to help @HBB1, please?  
Have a great day and thanks so much for your help!  
Bérangère

---

<div class="post-metadata">

**Author:** ![sylvain\_tirreau](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/sylvain_tirreau/32/67408_2.png) [@sylvain\_tirreau](https://community.hubspot.com/u/sylvain_tirreau)\
**Post date:** [May 8, 2025, 8:20am UTC](https://community.hubspot.com/t/mobile-menu-not-working/129674/8 "2025-05-08T08:20:06Z")

</div>

Hi,

In which file did you put this code? It looks like a CSS file, and JavaScript doesn’t fit in CSS at all.

Can you give us more information about your files? For example, which file is the code (or module) for your menu located in? If it’s via a module, what is the module name? Feel free to attach screenshots of the files in question as they appear in HubSpot’s Design Manager.

---

<div class="post-metadata">

**Author:** ![HBB1](https://avatars.discourse-cdn.com/v4/letter/h/898d66/32.png) [@HBB1](https://community.hubspot.com/u/HBB1)\
**Post date:** [May 9, 2025, 5:11pm UTC](https://community.hubspot.com/t/mobile-menu-not-working/129674/9 "2025-05-09T17:11:12Z")

</div>

Thanks! Oh yes you’re right - I guess that’s why the JavaScript didn’t work.

It’s in the menu “menus.css” which is under a theme. Does that help?

 ![Screen Shot 2025-05-09 at 1.07.46 pm.png](https://d2qpr2jzcazej7.cloudfront.net/original/2X/b/bfc4ecea301ec7911a98b41cbe4d0a73e1f81fb8.png)

---

<div class="post-metadata">

**Author:** ![sylvain\_tirreau](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/sylvain_tirreau/32/67408_2.png) [@sylvain\_tirreau](https://community.hubspot.com/u/sylvain_tirreau)\
**Post date:** [May 23, 2025, 4:29pm UTC](https://community.hubspot.com/t/mobile-menu-not-working/129674/10 "2025-05-23T16:29:15Z")

</div>

I would need information about the file structure to know which template loads the menu, to know if there is a javascript file that is linked to your menu in order to put the javascript code in this file. Can you know in which template the menu is loaded? A module? A partial? Something else?

---

<div class="post-metadata">

**Author:** ![HBB1](https://avatars.discourse-cdn.com/v4/letter/h/898d66/32.png) [@HBB1](https://community.hubspot.com/u/HBB1)\
**Post date:** [May 23, 2025, 4:05pm UTC](https://community.hubspot.com/t/mobile-menu-not-working/129674/11 "2025-05-23T16:05:54Z")

</div>

Is there a way to convert this javascript to CSS?