Jump to content

Adding Flag icon svgs to the header and making them responsive

Recommended Posts

Hi, 

I'm trying to add two flag svg files to my header, both going to two websites. I adapted code that was found on this forum to do it, the flag icons look fine on desktop but when it shows on tablet and mobile it does not stay in the position beside the hamburger icon and one of the flags is no longer clickable on mobile view. Would anybody Know how to fix this, I'm sure I have the code wrong and need some help on the mobile query

 

This is the code I've used

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
  $(document).ready(function() { 
$('<a title="United States Website" href="https://creativepip.com/" target="_blank"><img src="https://static1.squarespace.com/static/65e86ab19a980a03f068ea6f/t/666064f9d54cda6204dc07e3/1717593337478/us.flag-circle.svg" class="us"  /></a>').appendTo('.header-title-nav-wrapper'); 
	});
</script>

<style>
  img.us {
    width: 30px;
    margin-left: -30px;
    /*box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);*/
  @media screen and (max-width:768px) {
  img.us {
    position: absolute;
    right: 28vw;
    top: 15px;
}
  }
</style>

<script>
  $(document).ready(function() { 
$('<a title="Korea Website" href="https://creativepip.com/" target="_blank"><img src="https://static1.squarespace.com/static/65e86ab19a980a03f068ea6f/t/6660681781dc74086dbf603d/1717594136144/sk-flag-04.svg" class="sk"  />').appendTo('.header-title-nav-wrapper'); 
	});
</script>

<style>
  img.sk {
    width: 30px;
    margin-left: 10px;
    /*box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);*/
}
  @media screen and (max-width:768px) {
  img.sk {
    position: absolute;
    right: 20vw;
    top: 15px;
}
  }
</style>

You can see the images I've attached showing it on desktop, then tablet and mobile, I'd like them side by side on mobile and clickable. Could anybody help me with this?

 

 

Screenshot 2024-06-28 at 11.26.14.png

Screenshot 2024-06-28 at 11.27.31.png

Screenshot 2024-06-28 at 11.38.45.png

Link to comment
  • Replies 5
  • Views 281
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

Hi @MayaViolet, I tried that now but it doesn't seem to have changed anything, I think I might have the mobile break positioning off, it goes weird on tablet size and some mobile devices and the US. flag still isn't clickable on mobile, not sure why that's happening

Link to comment
On 6/29/2024 at 1:50 AM, Pip1 said:

Hi @MayaViolet, I tried that now but it doesn't seem to have changed anything, I think I might have the mobile break positioning off, it goes weird on tablet size and some mobile devices and the US. flag still isn't clickable on mobile, not sure why that's happening

Hi @Pip1 - what about trying this code within the mobile media query?

 

.header-display-mobile .header-title {
    max-width: fit-content !important;
	margin-right: auto !important;
}

 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • 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.