Hamburger nav not working, despite custom JS added to template

Developer Support CMS Development
1

Hi there, I’m new to Hubspot so please bare with me.

I am trying to get the hamburger nav to work on this site on mobile - AqFresh™ Hair & Personal Care Consumer Insights Report

I have added the following custom JS needed to get this working to the Blog Settings > Templates > Footer HTML CMS section of the site:

<script>
var aqdot = {};
(function () {
 aqdot = {
 ////////////////////// menu
 menu: function menu() {
 var hamburger = document.querySelector('.hamburger');
 var siteNavigation = document.querySelector('#site-navigation');

 hamburger.addEventListener('click', function () {
 hamburger.classList.toggle('is-active');
 siteNavigation.classList.toggle('open');
 });
 }
 };
})();
</script>

but it’s not adding the class to the site-navigation element on click nor is it adding the is-active class to the hamburger on click. Note: I tried adding a console.log(); and this didn’t show in the console either.

Here’s the Header HTML:

<header id="masthead" class="site-header">
 <div class="container-fluid">
 <div class="row align-items-center justify-content-between">
 <div class="site-branding col-7 col-md-2">
 <a href="https://aqdot.com/" rel="home"
 ><img
 src="https://aqdot.com/wp-content/uploads/2019/12/aqdot-white.svg"
 /></a>
 </div>

 <button class="menu-toggle hamburger hamburger--stand d-xl-none" type="button" aria-controls="primary-menu" aria-expanded="false">
					<span class="hamburger-box">
						<span class="hamburger-inner"></span>
					</span>
				</button>

 <nav
 id="site-navigation"
 class="main-navigation col-12 col-xl-9 col-xxl-8 d-flex justify-content-center"
 >
 <div class="menu-menu-container">
 <ul id="primary-menu" class="menu">
 <li
 id="menu-item-24"
 class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home menu-item-24"
 >
 <a href="https://aqdot.com/">Home</a>
 </li>
 <li
 id="menu-item-32"
 class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-32"
 >
 <a href="#/">Our products & solutions</a>
 <ul class="sub-menu">
 <li
 id="menu-item-108"
 class="menu-item menu-item-type-post_type menu-item-object-solutions menu-item-108"
 >
 <a
 href="https://aqdot.com/products/advanced-odour-elimination/"
 >Advanced Odour Elimination</a
 >
 </li>
 <li
 id="menu-item-1548"
 class="menu-item menu-item-type-post_type menu-item-object-solutions menu-item-1548"
 >
 <a
 href="https://aqdot.com/products/advanced-allergen-removal/"
 >Advanced Allergen Removal</a
 >
 </li>
 <li
 id="menu-item-1215"
 class="menu-item menu-item-type-post_type menu-item-object-solutions menu-item-1215"
 >
 <a
 href="https://aqdot.com/products/advanced-fragrance-release/"
 >Advanced Fragrance Release</a
 >
 </li>
 <li
 id="menu-item-1588"
 class="menu-item menu-item-type-post_type menu-item-object-solutions menu-item-1588"
 >
 <a
 href="https://aqdot.com/products/aqfresh-advanced-pollutant-capture/"
 >Advanced Pollutant Capture</a
 >
 </li>
 <li
 id="menu-item-1670"
 class="menu-item menu-item-type-post_type menu-item-object-solutions menu-item-1670"
 >
 <a
 href="https://aqdot.com/products/aqfresh-advanced-virus-neutralisation/"
 >Advanced Virus Neutralisation</a
 >
 </li>
 </ul>
 </li>
 <li
 id="menu-item-33"
 class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-33"
 >
 <a href="#/">Your industries</a>
 <ul class="sub-menu">
 <li
 id="menu-item-1249"
 class="menu-item menu-item-type-post_type menu-item-object-industries menu-item-1249"
 >
 <a href="https://aqdot.com/industries/home-and-pet-care/"
 >Home and Pet Care</a
 >
 </li>
 <li
 id="menu-item-121"
 class="menu-item menu-item-type-post_type menu-item-object-industries menu-item-121"
 >
 <a href="https://aqdot.com/industries/personal-care/"
 >Personal Care</a
 >
 </li>
 <li
 id="menu-item-1222"
 class="menu-item menu-item-type-post_type menu-item-object-industries menu-item-1222"
 >
 <a href="https://aqdot.com/industries/nonwovens/"
 >Nonwovens</a
 >
 </li>
 <li
 id="menu-item-1221"
 class="menu-item menu-item-type-post_type menu-item-object-industries menu-item-1221"
 >
 <a href="https://aqdot.com/industries/automotive-interiors/"
 >Automotive Interiors</a
 >
 </li>
 <li
 id="menu-item-1219"
 class="menu-item menu-item-type-post_type menu-item-object-industries menu-item-1219"
 >
 <a href="https://aqdot.com/industries/academic-researchers/"
 >Academic Researchers</a
 >
 </li>
 </ul>
 </li>
 <li
 id="menu-item-34"
 class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-34"
 >
 <a href="#/">Working with us</a>
 <ul class="sub-menu">
 <li
 id="menu-item-1211"
 class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1211"
 >
 <a
 href="https://aqdot.com/working-with-us/analytical-odour-testing/"
 >Analytical Odour Testing for AqFresh</a
 >
 </li>
 <li
 id="menu-item-31"
 class="menu-item menu-item-type-post_type menu-item-object-page menu-item-31"
 >
 <a
 href="https://aqdot.com/working-with-us/sensory-odour-testing/"
 >Sensory odour testing for AqFresh</a
 >
 </li>
 </ul>
 </li>
 <li
 id="menu-item-35"
 class="menu-item menu-item-type-custom menu-item-object-custom current-menu-ancestor current-menu-parent menu-item-has-children menu-item-35"
 >
 <a href="#/">News</a>
 <ul class="sub-menu">
 <li
 id="menu-item-85"
 class="menu-item menu-item-type-taxonomy menu-item-object-category current-menu-item menu-item-85"
 >
 <a
 href="https://blog.aqdot.com/aqfresh-odour-elimination-news/"
 aria-current="page"
 >AqFresh™ Odour Elimination</a
 >
 </li>
 <li
 id="menu-item-89"
 class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-89"
 >
 <a href="https://blog.aqdot.com/aqdot-corporate-careers-news/"
 >Aqdot Corporate & Careers</a
 >
 </li>
 </ul>
 </li>
 <li
 id="menu-item-36"
 class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-36"
 >
 <a href="#/">Contact us</a>
 <ul class="sub-menu">
 <li
 id="menu-item-25"
 class="menu-item menu-item-type-post_type menu-item-object-page menu-item-25"
 >
 <a href="https://aqdot.com/contact-us/">Contact us</a>
 </li>
 <li
 id="menu-item-26"
 class="menu-item menu-item-type-post_type menu-item-object-page menu-item-26"
 >
 <a href="https://aqdot.com/directions/">Directions</a>
 </li>
 </ul>
 </li>
 <li
 id="menu-item-29"
 class="menu-item menu-item-type-post_type menu-item-object-page menu-item-29"
 >
 <a href="https://aqdot.com/our-business/">Our business</a>
 </li>
 </ul>
 </div>
 </nav>

 <div
 class="header-social col-5 col-xl-1 col-xxl-2 d-flex justify-content-end"
 >
 <ul>
 <li>
 <a
 href="https://www.linkedin.com/company/aqdot-limited/"
 target="_blank"
 ><i class="fab fa-linkedin-in" aria-hidden="true"></i
 ></a>
 </li>
 <li>
 <a href="https://twitter.com/aqdot" target="_blank"
 ><i class="fab fa-twitter" aria-hidden="true"></i
 ></a>
 </li>
 </ul>
 </div>
 </div>
 </div>
 </header>

Am I putting the JS code in the wrong place? Why is it not running?

Thanks for your patience in advance on this.

2

Your menu function is inside an object that’s being placed inside a variable by another function, so basically it’s never actually being told to run. Move it outside of all that wrapping and it should work.

var hamburger = document.querySelector('.hamburger');
var siteNavigation = document.querySelector('#site-navigation');

hamburger.addEventListener('click', function () {
 hamburger.classList.toggle('is-active');
 siteNavigation.classList.toggle('open');
});
3

Thanks so much! That works :blush:

4

Thanks, @alyssamwilie :raising_hands: