Mobile menu not working

[HBB1]

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(max-width:1199px){
.custom-menu-primary ul li a {
padding: 10px 5px;
}
}

@media(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(max-width:767px){

}

[Berangere]

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

[PremKannan]

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:

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

     // Select only the parent items that have children

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

     parentItems.forEach(function(item){

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

     // Only for mobile views (adjust the width as needed)

     if (window.innerWidth <= 991) {

     e.preventDefault(); // Prevent default navigation if needed

     item.classList.toggle(‘clicked’);

     }

     });

     });

     });

2. How it works:

   • The JavaScript listens for a tap on parent menu items.

   • On mobile (when the viewport width is 991px or less), the script prevents the default behavior and toggles the “clicked” class.

   • The CSS rule

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

     then displays the child menu.

Hope this helps!!

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

[HBB1]

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

[PremKannan]

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.

[HBB1]

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!

[Berangere]

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 do you have other suggestions to help @HBB1, please?
Have a great day and thanks so much for your help!
Bérangère

[sylvain_tirreau]

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.

[HBB1]

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?

[sylvain_tirreau]

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?

[HBB1]

Is there a way to convert this javascript to CSS?