Format nav links

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!

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?

Sorry, 123coastalgrain123