Responsive page using Next

Community feedback

• 

  Saad Hisham•1,750

  @Saad-HishamPosted over 1 year ago

  this site is perfect ❤ I just noticed a small issue with the navbar not being synchronized with the site. That can definitely be a bit confusing for users, but no worries, there's a simple fix for it!

  While I'm not familiar with Next.js, I can definitely provide you with some guidelines on how to fix this issue with vanilla JavaScript.

  To start, you'll need to obtain the current URL of the page. You can use the window.location.href property to do this.

  const currentUrl = window.location.href;
  const pageName = currentUrl.split("/").pop();
  

  Next, you can create a function that extracts the page name from the URL. Here's an example code snippet: This code creates a const variable called currentUrl that stores the current URL of the page. It then creates a const variable called pageName that extracts the page name from the URL using the split() and pop() methods.

  Now that you have the page name, you can use JavaScript to add an active class to the corresponding navbar link. Here's an example code snippet:

  const navLinks = document.querySelectorAll(".nav-link");
  
  navLinks.forEach((link) => {
    if (link.getAttribute("href") === pageName) {
      link.classList.add("active");
    }
  });
  

  This code selects all of the navbar links using the querySelectorAll() method and stores them in a const variable called navLinks. It then loops through each link using the forEach() method and checks if the link's href attribute matches the pageName variable. If it does, it adds an active class to the link using the classList.add() method.

  I hope these guidelines help you fix the issue with the navbar synchronization! Keep up the great work, and happy coding! ❤️

  Marked as helpful

  1