Help! My responsive menu is not function when I click on Menu

[surajgond07]

The Mobile Menu function is not working!

with Vscode live server the mobile menu function is properly working but after deploying on netlify the function is now working.
my netlify site name. https://surajinfotech.netlify.app/
my GitHub site: GitHub - surajgond07/suraj-infotech

this code is for the menu function

const collapsibles = document.querySelectorAll(“.collapsible”);
collapsibles.forEach((item) =>
item.addEventListener(“click”, function() {
this.classList.toggle(“collapsible–expanded”);
})
);

[rBok6]

Hello @surajgond07. Looking at the code that you provided it seems like there’s a typo in the variable name. You’re calling it “collapsible” but you declared it as “collapsibles” in plural. That’s probably your problem.

[clarnx]

Hello @surajgond07 , thanks for posting your problem.

@surajgond07

const collapsibles = document.querySelectorAll(“.collapsible”);
collapsibles.forEach((item) =>
item.addEventListener(“click”, function() {
this.classList.toggle(“collapsible–expanded”);
})
);

Your code to toggle the nav menu above does not work because you are targeting the wrong elements.
Kindly change it to the code below to see if it helps.

const navToggler = document.querySelector("nav > svg");
const navMenu = document.querySelector("nav > ul");

navToggler.addEventListener("click", function () {
  navMenu.classList.toggle("collapsible–expanded");
  if (navMenu.classList.contains("collapsible__content") === true) {
    navMenu.classList.remove("collapsible__content");
  } else {
    navMenu.classList.add("collapsible__content");
  }
});

[surajgond07]

@clarnx

toggle the nav menu

your code is also not working on netlify site. You can check it.

[coelmay]

Hey @surajgond07

This isn’t a Netlify issue, it is and issue with the code in your site.

That said, I managed to add the following code using devtools to make the menu show/hide

document.querySelector('nav > svg').addEventListener('click', () => {
    document.querySelector('nav > ul').classList.toggle('collapsible__content')
})

[clarnx]

@surajgond07 , thanks for the feedback. I noticed my code and @coelmay’s code will work in dev tools. However if you use either my code or @coelmay’s code in your main.js file, the codes will not work on your deployed site because in your HTML you added the script tag twice. Kindly remove the script tag in the footer element.

            <div class="footer__brand">
                <img src="images/logo.png" alt="">
                <p class="footer__copyright">Copyright 2022 Suraj Infotech</p>
            </div>
            <!-- Remove the script tag below -->
            <!-- <script src="js/main.js"></script> -->
        </div>
    </footer>
    <!-- Footer End -->

    <script src="js/main.js"></script>
    <!-- AOS Animation -->
    <script src="https://unpkg.com/aos@next/dist/aos.js"></script>

I also noticed your footer has navigation menus. Therefore I edited the original main.js code to also register click events on the footer navigation menus. Your main.js script should now look like the code below.

const navToggler = document.querySelector("nav > svg");
const navMenu = document.querySelector("nav > ul");

const collapsibles = document.querySelectorAll(".collapsible.footer__section");

// Click event for navbar navigation menu
navToggler.addEventListener("click", () => {
  navMenu.classList.toggle("collapsible__content");
});

// Click events for footer navigation menus
collapsibles.forEach((item) => {
  item.addEventListener("click", (e) => {
    e.currentTarget.querySelector("div:nth-child(2)").classList.toggle("collapsible__content");
  });
});

All the menus should toggle now.

Let me know if it works.

[surajgond07]

@coelmay

document.querySelector('nav > svg').addEventListener('click', () => {
    document.querySelector('nav > ul').classList.toggle('collapsible__content')
})

hey @coelmay

I’m also trying your advice. You can see the code. But still toggle Menu and footer not working on netlify.

[clarnx]

@surajgond07 have you tried the edited code suggestion to see if it works or not?
As I stated earlier

@clarnx

I noticed my code and @coelmay’s code will work in dev tools. However if you use either my code or @coelmay’s code in your main.js file, the codes will not work on your deployed site because in your HTML you added the script tag twice. Kindly remove the script tag in the footer element.

Also check the code suggestion for the footer menu.

[coelmay]

I see the menu is now working.

[surajgond07]

Hello, @clarnx thanks for your support. the menu and toggle are working now but there is a tiny problem I got now. When I put your JS code the animation and transition effect went with the menu button and toggler.

[surajgond07]

[clarnx]

@surajgond07 , I have modified the code in your main.js file that will enable the animations for all the togglers.
Kindly check below.

const navToggler = document.querySelector("nav > svg");

const collapsibles = document.querySelectorAll(".collapsible.footer__section");

// Click event for navbar navigation menu
navToggler.addEventListener("click", (e) => {
  e.currentTarget.parentElement.classList.toggle("collapsible--expanded");
});

// Click events for footer navigation menus
collapsibles.forEach((item) => {
  item.addEventListener("click", (e) => {
    e.currentTarget.classList.toggle("collapsible--expanded");
  });
});

If this code suggestion solves your problem kindly mark it as solved.
Hope this helps.

[hillary]

Great problem solving, @clarnx. Thanks for this!!

[clarnx]

Hello @hillary , You are welcome. I’m glad I was able to help.