Jump to content

How to make floating flag icons on top right

Recommended Posts

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!

Link to comment
  • Replies 8
  • Views 1.6k
  • Created
  • Last Reply

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?

Link to comment

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 

Link to comment
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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? 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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.

Link to comment

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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Archived

This topic is now archived and is closed to further replies.


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.