How to add a country flag to header along with a hamburger menu

I am looking to add an image of country flag onto the top left of the web page. The flag needs to be a link to an external site of that country. My problem is that I also have a hamburger menu. I am unable to have 2 custom codes. Is it possible to get some help in creating some new code for this?

This is what I am trying to achieve. 

This is my menu code: 

.header .header-mobile-layout-logo-center-nav-left .header-display-mobile .header-burger {
    order: 2 !important;
}

.burger-inner.header-menu-icon-doubleLineHamburger .top-bun {
    height: 3px !important;
    transform: translateY(-10px);
}

.burger-inner.header-menu-icon-doubleLineHamburger .patty {
    background-color: #000 !important;
    height: 3px !important;
    transform: unset !important;
}

.burger-inner.header-menu-icon-doubleLineHamburger .bottom-bun {
    transform: translateY(10px);
    height: 3px !important;
}

.header .header-mobile-layout-logo-center-nav-left .header-display-mobile .header-title {
    text-align: unset;
}

.header-burger {
    display: flex;
}

.header-nav {
    display: none !important;
}

.header--menu-open .header-menu {
    opacity: 1;
    visibility: visible;
}

I did find code to add an country flag image from one of the forums here from a member: 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
  $(document).ready(function() { 
		$('<img src="https://upload.wikimedia.org/wikipedia/commons/d/d9/Flag_of_Canada_%28Pantone%29.svg" class="cnd"/>').appendTo('.header-title-nav-wrapper');
	});
</script>
<style>
  img.cnd {
    width: 50px;
    margin-left: 20px;
}
  @media screen and (max-width:991px) {
  img.cnd {
    position: absolute;
    right: 2vw;
    top: 5px;
}
  }
</style>

But I am unable to use the two together! Please help! 

preview of site : https://aimekitchen-us.squarespace.com

Many thanks!!! 🙂 

Don't remove any code in your current code. Add this to Custom CSS

@media screen and (min-width:992px) {
 /* Force burger on desktop */
  .header-burger {
    display: flex !important
}

.header--menu-open .header-menu {
    opacity: 1 !important;
    visibility: visible !important
}

@media screen and (min-width: 768px) {
    .header-menu {
        left:unset;
        width: 25%
    }
}

nav.header-nav-list>div:not(:last-child) {
    display: none;
}

.header-nav {
    order: 1 !important;
    text-align: left !important;
    flex: 0 0 30% !important;
    margin-left: 0 !important;
}

.header-title {
    order: 2 !important;
}

.header-title a {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

.header-announcement-bar-wrapper {
    padding-top: 5vw !important;
}
}

Hello,

I'm trying to do something similar in the navigation of a site I'm working on. I want to have U.S flag, European flag and UK flag that each link to a different website. How do I add the URL links to this script? I've adapted this script found on the forum that was posted above.

Quote

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
  $(document).ready(function() { 
		$('<img src="https://upload.wikimedia.org/wikipedia/commons/d/d9/Flag_of_Canada_%28Pantone%29.svg" class="cnd"/>').appendTo('.header-title-nav-wrapper');
	});
</script>
<style>
  img.cnd {
    width: 50px;
    margin-left: 20px;
}
  @media screen and (max-width:991px) {
  img.cnd {
    position: absolute;
    right: 2vw;
    top: 5px;
}
  }
</style>

This might be the wrong way to change it, you can see my version here, can somebody show me where to add my external link on the svg

Quote

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
  $(document).ready(function() { 
$('<img src="https://upload.wikimedia.org/wikipedia/commons/a/a4/Flag_of_the_United_States.svg" class="us"/>').appendTo('.header-title-nav-wrapper'); 
    });
</script>

<style>
  img.us {
    width: 50px;
    margin-left: 10px;
}
  @media screen and (max-width:991px) {
  img.us {
    position: absolute;
    right: 12vw;
    top: 15px;
}
  }
</style>

<script>
  $(document).ready(function() { 
$('<img src="https://upload.wikimedia.org/wikipedia/commons/b/b7/Flag_of_Europe.svg" class="eu"/>').appendTo('.header-title-nav-wrapper'); 
    });
</script>

<style>
  img.eu {
    width: 50px;
    margin-left: 10px;
}
  @media screen and (max-width:991px) {
  img.eu {
    position: absolute;
    right: 26vw;
    top: 15px;
}
  }
</style>

<script>
  $(document).ready(function() { 
$('<img src="https://upload.wikimedia.org/wikipedia/commons/8/83/Flag_of_the_United_Kingdom_%283-5%29.svg" class="uk"/>').appendTo('.header-title-nav-wrapper'); 
    });
</script>

<style>
  img.uk {
    width: 50px;
    margin-left: 10px;
}
  @media screen and (max-width:991px) {
  img.uk {
    position: absolute;
    right: 40vw;
    top: 15px;
}
  }
</style>

On 3/21/2024 at 9:38 PM, Pip1 said:

Hello,

I'm trying to do something similar in the navigation of a site I'm working on. I want to have U.S flag, European flag and UK flag that each link to a different website. How do I add the URL links to this script? I've adapted this script found on the forum that was posted above.

This might be the wrong way to change it, you can see my version here, can somebody show me where to add my external link on the svg

 

You can share your site url, we can check easier

Hi, I've just entered this menu code works great. Is there a way to customise it? I cant seem to figure out how to do it.

On 4/25/2024 at 8:45 PM, Olly1 said:

Hi, I've just entered this menu code works great. Is there a way to customise it? I cant seem to figure out how to do it.

Customize color, size or? And what is site url?

hi @tuanphan,

I've changed my flag code slightly but I'm having issues displaying them at the breakpoint on Tablet and mobile, You can see it is ok on desktop but as I size down the screen it goes all over the place. Would you know of a fix for this?

1 minute ago, Pip1 said:

hi @tuanphan,

I've changed my flag code slightly but I'm having issues displaying them at the breakpoint on Tablet and mobile, You can see it is ok on desktop but as I size down the screen it goes all over the place. Would you know of a fix for this?

 

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

21 hours ago, Pip1 said:

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

 

What is site url?

Hi @tuanphan

sure

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

pw: pip1

For some reason my U.S flag becomes unclickable on mobile too, not sure why that's happening, maybe my positioning is too close to the hamburger icon?

I think you should wrap both flags on an HTML then you can target it easier. You can follow these two steps.

(Remember to save a copy of all code somewhere, just for backup, before doing anything)

(1) Remove this code

On 6/29/2024 at 3:24 PM, tuanphan said:

 

On 6/28/2024 at 5:34 PM, Pip1 said:

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

 

(2) then use this new code to Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function() { 
$('<div class="language-flag"><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><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"  /></div>').appendTo('.header-title-nav-wrapper'); 
	});
</script>
<style>
img.us {
    width: 30px;
    margin-left: -30px;
}
.header-display-mobile .header-title {
    flex: 1 0 calc(100% - 100px) !important;
}
</style>

Hi @tuanphan

Thank you very much for your time in helping me. I removed the old code and added this code to the footer, it's not overlapping like before but it is a little close to the hamburger menu, you end up clicking that instead of the flag. Is there a way to space them less close to the hamburger icon? It looks great on Squarespace mobile view, when I test it on a mobile device I see it is too close... see the picture attached.

For some reason the U.S flag stops being clickable on mobile, what would be causing that or blocking that? It works on a desktop

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function() { 
$('<div class="language-flag"><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><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"  /></div>').appendTo('.header-title-nav-wrapper'); 
	});
</script>
<style>
img.us {
    width: 30px;
    margin-left: -30px;
}
  img.sk {
    width: 30px;
    margin-left: 10px;
    
}
.header-display-mobile .header-title {
    flex: 1 0 calc(100% - 100px) !important;
}
</style>

On 7/1/2024 at 6:17 PM, Pip1 said:

Hi @tuanphan

Thank you very much for your time in helping me. I removed the old code and added this code to the footer, it's not overlapping like before but it is a little close to the hamburger menu, you end up clicking that instead of the flag. Is there a way to space them less close to the hamburger icon? It looks great on Squarespace mobile view, when I test it on a mobile device I see it is too close... see the picture attached.

For some reason the U.S flag stops being clickable on mobile, what would be causing that or blocking that? It works on a desktop

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function() { 
$('<div class="language-flag"><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><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"  /></div>').appendTo('.header-title-nav-wrapper'); 
	});
</script>
<style>
img.us {
    width: 30px;
    margin-left: -30px;
}
  img.sk {
    width: 30px;
    margin-left: 10px;
    
}
.header-display-mobile .header-title {
    flex: 1 0 calc(100% - 100px) !important;
}
</style>

 

Use this code under

<style>
  @media screen and (max-width:991px) {
  .language-flag img {
    margin: unset !important;
    margin-right: 20px !important;
}
.language-flag {
    display: flex !important;
}
  }
</style>

On 7/3/2024 at 11:14 AM, tuanphan said:

Use this code under

<style>
  @media screen and (max-width:991px) {
  .language-flag img {
    margin: unset !important;
    margin-right: 20px !important;
}
.language-flag {
    display: flex !important;
}
  }
</style>

 

Oh Brilliant, this has worked, thanks so much @tuanphan