Jump to content

Format nav links

Recommended Posts

Site URL: https://www.coastalgrain2.squarespace.com

Hey guys,

I have added custom code to create a dropdown menu from a folder;

<script>
(function () {
  let folders;

  function createEventListener(e) {
    let href = e.target.href.replace("-folder/", "");
    window.open(href, "_self");
  }

  function addToMobile(folder) {
    let href = folder.getAttribute("href"),
      hrefAdjusted = href.replace("-folder/", ""),
      text = folder.innerText,
      mobileFolder = document.querySelector(`[data-folder="${href}"]`),
      backButton = mobileFolder.querySelector(".header-menu-nav-folder-content > *:first-of-type");

    //If it exists already
    if (mobileFolder.querySelector(`[href="${href}"]`)) return;

    let newLinkContainer = document.createElement("div"),
      newLink = `<a href="${hrefAdjusted}" tabindex="0">All ${text}</a>`;

    newLinkContainer.classList = "container header-menu-nav-item header-menu-nav-item--external";
    newLinkContainer.innerHTML = newLink;
    insertAfter(newLinkContainer, backButton);
  }

  /* Select All Folder Links &  */
  function setFolderLinks() {
    folders = document.querySelectorAll('.header-display-desktop .header-nav-folder-title[href*="-folder/"]');

    for (folder of folders) {
      folder.addEventListener("click", createEventListener);
    }
  }

  /* Insert After Helper Function */
  function insertAfter(newNode, existingNode) {
    existingNode.parentNode.insertBefore(newNode, existingNode.nextSibling);
  }

  setFolderLinks();
})();
</script>

Now I'm trying to format the folder navigation links so they are a certain colour and underlined when active - can someone help out with custom css for this?

This is what I have for regular nav items;

.header-nav-item--active a {
    color: #0DBBBF !important;
}

Thanks!

Link to comment
  • Replies 2
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

56 minutes ago, markadekoning said:

Site URL: https://www.coastalgrain2.squarespace.com

Hey guys,

I have added custom code to create a dropdown menu from a folder;

<script>
(function () {
  let folders;

  function createEventListener(e) {
    let href = e.target.href.replace("-folder/", "");
    window.open(href, "_self");
  }

  function addToMobile(folder) {
    let href = folder.getAttribute("href"),
      hrefAdjusted = href.replace("-folder/", ""),
      text = folder.innerText,
      mobileFolder = document.querySelector(`[data-folder="${href}"]`),
      backButton = mobileFolder.querySelector(".header-menu-nav-folder-content > *:first-of-type");

    //If it exists already
    if (mobileFolder.querySelector(`[href="${href}"]`)) return;

    let newLinkContainer = document.createElement("div"),
      newLink = `<a href="${hrefAdjusted}" tabindex="0">All ${text}</a>`;

    newLinkContainer.classList = "container header-menu-nav-item header-menu-nav-item--external";
    newLinkContainer.innerHTML = newLink;
    insertAfter(newLinkContainer, backButton);
  }

  /* Select All Folder Links &  */
  function setFolderLinks() {
    folders = document.querySelectorAll('.header-display-desktop .header-nav-folder-title[href*="-folder/"]');

    for (folder of folders) {
      folder.addEventListener("click", createEventListener);
    }
  }

  /* Insert After Helper Function */
  function insertAfter(newNode, existingNode) {
    existingNode.parentNode.insertBefore(newNode, existingNode.nextSibling);
  }

  setFolderLinks();
})();
</script>

Now I'm trying to format the folder navigation links so they are a certain colour and underlined when active - can someone help out with custom css for this?

This is what I have for regular nav items;

.header-nav-item--active a {
    color: #0DBBBF !important;
}

Thanks!

Can you share the site-wide password?

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.