How to add language flag on right of Header button

[tuanphan]

To add language flat on right of Header button in Squarespace, like this. Here I use Website Translator widget to add language.

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

div.header-actions-action {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-direction: row-reverse;
}

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

#3. Next, click Custom JS

#4. Paste 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 init = async () => {
  const translator = await waitForElement('.elfsight-app-299b9dd9-2920-4ca2-9bac-08d01a3ca8e5');
  const targetBtn = await waitForElement('div.header-actions-action a.btn');

  if (translator && targetBtn) {
    targetBtn.parentNode.insertBefore(translator, targetBtn);
  }
};

init();

Remember to update this ID.

You can find ID in Embed Code.

or find it in Code Injection