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