How to add language flag next to Header button

[tuanphan]

If you added 2 (or 3, 4) languages to your Squarespace site, use this approach. To move Language switcher flag next to Header button, from this.

to this.

#1. First, use this code to Custom CSS

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

#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