Adding Flag icon svgs to the header and making them responsive

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?

Hi @Pip1, can you share the live link to your website (and pw if necessary) to be able to inspect the website live and give the correct solution? Thanks!

Maya

Hi @MayaViolet

sure

https://manatee-flugelhorn-pmg9.squarespace.com/

pw: pip1

11 minutes ago, Pip1 said:

Hi @MayaViolet

sure

https://manatee-flugelhorn-pmg9.squarespace.com/

pw: pip1

Hi @Pip1 so it looks like your code for mobile screens just isn't applying... can you try adding the !important tag after those elements?

  @media screen and (max-width:768px) {
  img.sk {
    position: absolute !important;
    right: 20vw !important;
    top: 15px !important;
}
  }

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

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