How to add language switcher next to header button, above mobile button

[tuanphan]

To add language switcher next to header button Squarespace. Here I use Website Translator widget to add language.

and above mobile button, like this.

#1. First, use this code to Custom CSS.

div.header-actions-action {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-direction: row-reverse;
}
div.header-menu-cta div {
    justify-content: flex-start !important;
    align-items: flex-start !important;
    padding-left: 1.5vw;
}

#2. Next, on Website Translator widget > Choose this option

#3. Next, click Custom JS

#4. Use this code

const waitForElement = (selector, root = document) =>
  new Promise((res) => {
    const element = root.querySelector(selector);
    if (element) {
      res(element);
      return;
    }
    const observer = new MutationObserver(() => {
      const element = root.querySelector(selector);
      if (element) {
        res(element);
        observer.disconnect();
      }
    });
    observer.observe(root, {
      childList: true,
      subtree: true,
    });
  });

const processButtons = (translator) => {
  const targetBtns = document.querySelectorAll('a.btn:not([data-translator-added])');
  
  targetBtns.forEach((targetBtn) => {
    const translatorClone = translator.cloneNode(true);
    targetBtn.parentNode.insertBefore(translatorClone, targetBtn);
    targetBtn.setAttribute('data-translator-added', 'true');
  });
};

const init = async () => {
  const translator = await waitForElement('.elfsight-app-299b9dd9-2920-4ca2-9bac-08d01a3ca8e5');
  
  await waitForElement('a.btn');
  
  processButtons(translator);
  
  const observer = new MutationObserver(() => {
    processButtons(translator);
  });
  
  observer.observe(document.body, {
    childList: true,
    subtree: true,
  });
};

init();

Remember to update this ID.

You can find ID in Embed Code.

or find it in Code Injection