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