Upon clicking the mobile menu hamburger button, I am experiencing a lack of response. I expected the hamburger menu to transition and display the mobile menu, but it seems that neither action is being triggered.
Even though I can confirm that my javascript file MobileMenu.js is being accessed, the .click() event does not seem to be working as there is no reaction. While I do receive a console log message saying "Got into the MobileMenu!", I do not see the "You clicked it!" message from within the event either. Additionally, the css transition for the hamburger menu to change to an X does not occur.
There are no errors showing up in the console log or during my gulp build or watch processes. All of my packages are also up-to-date. I have been troubleshooting this issue for some time now and would greatly appreciate another pair of eyes to spot anything that I might be missing.
Thank you!
MobileMenu.js
console.log("Got into the MobileMenu!");
class MobileMenu{
constructor() {
this.menuIcon = $(".site-header__menu-icon");
this.siteHeader = $(".site-header__nav");
this.menuContent = $(".site-header__btn-container");
this.events();
}
events() {
this.menuIcon.click(this.toggleTheMenu).bind(this);
}
toggleTheMenu() {
console.log("You clicked it!");
this.siteHeader.toggleClass("site-header--is-expanded");
this.menuContent.toggleClass("site-header__menu-content--is-visible");
this.btnContent.toggleClass("site-header__btn-container--is-visible");
}
}
export default MobileMenu;
HTML
<div class="site-header__menu-icon">
<div class="site-header__menu-icon__middle"></div>
</div>
<ul class="site-header__logo" role="navigation">
<li class=""><a href="/"><h2>Logo name</h2></a></li>
</ul>
<ul class="site-header__nav">
<li class="site-header__nav--item"><a href="#about">About Me</a></li>
<li class="site-header__nav--item"><a href="#what">What I Do</a></li>
<li class="site-header__nav--item"><a href="#portfolio">Portfolio</a></li>
</ul>
<ul class="site-header__btn-container">
<li>
<a href="#" class="btn btn__nav btn--orange open-modal">Get in Touch</a>
</li>
</ul>
</header>
CSS - some
position: absolute;
width: 100%;
z-index: 2;
font-family: 'Aclonica', sans-serif;
padding-bottom: 20px;
&--is-expanded {
background-color: rgba($mainBlue, .55);
}
@mixin atMedium {
display: flex;
position: fixed;
height: 65px;
padding-top: 4px;
background-color: rgba($mainBlue, .9);
transition: background-color .3s ease-out;
list-style: none;
color: #fff;
&--dark {
background-color: rgba(23, 51, 72, .85);
}
}
My expectation is that upon clicking the menu button, the mobile menu will be visible and the menu content will populate.