milkcowsgomoo

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