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>