How to make floating flag icons on top right

Hi everyone,

I have a tourism website and want to be able to link to 2-3 specific pages using a series of floating flag icons on the top right of my website, each flag would link to a different translation. Does anyone have any idea how i could do this? I would want it to always remain at the top right of the page and they dont need to scroll down as i scroll, they can just stay static at the top right.

The template I am using is pacific in case that makes a difference.

Thanks so much!

Use this guide. bradgood.net/articles/multi-language-content-on-any-squarespace-template

Hi Tuanphan, thanks for the link - I've seen the various implementations including this but they require me to change my url slugs and break all the links and seo for the site, so I am looking simply to have two floating images on the top right as flags with links to specific pages. Could you help with any code for that?

OK I managed to figure it our with the following code and modifying a few bits, hopefully someone can help with a few tweaks i need to do:

  <meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.dropbtn {
  background-color: #3498DB;
  color: white;
  padding: 10px;
  font-size: 16px;
  border: none;
  cursor: pointer;

}

.dropbtn:hover, .dropbtn:focus {
  background-color: #2980B9;

}

.dropdown {
  position: absolute;
  display: inline-block;
          top: 70px;
  right: 10px ;
  z-index: 1;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 30px;
  overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 12px;
  text-decoration: none;
  display: block;
}

.dropdown a:hover {background-color: #ddd;}

.show {display: block;}
</style>
    
    <div class="dropdown">
  <button onclick="myFunction()" class="dropbtn">Language</button>
  <div id="myDropdown" class="dropdown-content">

 <a href="/">
         <img alt="English" src="https://static1.squarespace.com/static/57797c8437c58134dd125afd/t/5f3dcc2121f59460229cf271/1597885481741/uk.png" width="30px"
         >      </a>  
  <a href="/visitas-privadas-londres-portugues">
         <img alt="Portuguese" src="https://static1.squarespace.com/static/57797c8437c58134dd125afd/t/5f3dcc54756d870fafbddd09/1597885533362/portuguese.png" width="30px"
         >       </a>  
    
    <a href="/visitas-privadas-londres-espanol">
         <img alt="Spanish" src="https://static1.squarespace.com/static/57797c8437c58134dd125afd/t/5f3dcc39bd8be23608dba288/1597885507222/spain.png" width="30px"
         >
      </a>  
    </div>
</div>

<script>
/* When the user clicks on the button, 
toggle between hiding and showing the dropdown content */
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {
    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}
</script>

Now I am trying to do this but have no idea what to do: 

1) I want to change the word 'Language' to the first icon with the union jack, but I have no idea how to script that, so that appears almost as a default instead of the word.

The website is https://bit.ly/2CH8UQk 

Also is there a way to move it down by 'x' pixels if the announcement bar is enables and visible?

On 8/20/2020 at 9:48 AM, gldc said:

Also is there a way to move it down by 'x' pixels if the announcement bar is enables and visible?

Add to Home > Design > Custom CSS

/* Move down X announcement bar */
.sqs-announcement-bar-close {
    top: 35px;
}

On 8/20/2020 at 9:42 AM, gldc said:

OK I managed to figure it our with the following code and modifying a few bits, hopefully someone can help with a few tweaks i need to do:

 

  <meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.dropbtn {
  background-color: #3498DB;
  color: white;
  padding: 10px;
  font-size: 16px;
  border: none;
  cursor: pointer;

}

.dropbtn:hover, .dropbtn:focus {
  background-color: #2980B9;

}

.dropdown {
  position: absolute;
  display: inline-block;
          top: 70px;
  right: 10px ;
  z-index: 1;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 30px;
  overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 12px;
  text-decoration: none;
  display: block;
}

.dropdown a:hover {background-color: #ddd;}

.show {display: block;}
</style>
    
    <div class="dropdown">
  <button onclick="myFunction()" class="dropbtn">Language</button>
  <div id="myDropdown" class="dropdown-content">

 <a href="/">
         <img alt="English" src="https://static1.squarespace.com/static/57797c8437c58134dd125afd/t/5f3dcc2121f59460229cf271/1597885481741/uk.png" width="30px"
         >      </a>  
  <a href="/visitas-privadas-londres-portugues">
         <img alt="Portuguese" src="https://static1.squarespace.com/static/57797c8437c58134dd125afd/t/5f3dcc54756d870fafbddd09/1597885533362/portuguese.png" width="30px"
         >       </a>  
    
    <a href="/visitas-privadas-londres-espanol">
         <img alt="Spanish" src="https://static1.squarespace.com/static/57797c8437c58134dd125afd/t/5f3dcc39bd8be23608dba288/1597885507222/spain.png" width="30px"
         >
      </a>  
    </div>
</div>

<script>
/* When the user clicks on the button, 
toggle between hiding and showing the dropdown content */
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {
    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}
</script>

 

Now I am trying to do this but have no idea what to do: 

1) I want to change the word 'Language' to the first icon with the union jack, but I have no idea how to script that, so that appears almost as a default instead of the word.

 

The website is https://bit.ly/2CH8UQk 

You want to change language text to icon? 

Just now, tuanphan said:

You want to change language text to icon? 

Yes I want the flag to appear instead of the text as the default as it uses less space and looks nicer I think. Thanks.

Add to Home > Design > Custom CSS

.dropbtn {
    background-image: url(https://beaverhero.com/wp-content/uploads/2019/06/trees-3464777_640-min.jpg);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    color: transparent;
}