Skip to content

How to make nav links close the collapse menu? #36786

Answered by DeanParkin
DeanParkin asked this question in Q&A
Discussion options

You must be logged in to vote

I've managed to do it, it's probably not the soundest way to do it in react but it's working I ended up doing something along the lines of this:

useEffect(() => {
let size = window.innerWidth;
let navLinks = document.querySelectorAll(".nav-link");

const updateWindowDimensions = () => {
  size = window.innerWidth;
};
window.addEventListener("resize", () => {
  updateWindowDimensions();
  if (size > 992) {
    navLinks.forEach((link) => {
      link.removeAttribute("data-bs-toggle");
      link.removeAttribute("data-bs-target");
    });
    console.log("removed attributes");
  } else {
    navLinks.forEach((link) => {
      link.setAttribute("data-bs-toggle", "collapse");
      link.setAttr…

Replies: 4 comments 11 replies

Comment options

You must be logged in to vote
2 replies
@DeanParkin
Comment options

@GeoSot
Comment options

Comment options

You must be logged in to vote
5 replies
@DeanParkin
Comment options

@arturhonores
Comment options

@DeanParkin
Comment options

@arturhonores
Comment options

@DeanParkin
Comment options

Answer selected by DeanParkin
Comment options

You must be logged in to vote
4 replies
@arturhonores
Comment options

@aselemidivine
Comment options

@Ayushpatil3103
Comment options

@Pholarin
Comment options

Comment options

You must be logged in to vote
0 replies
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Category
Q&A
Labels
None yet
8 participants