Jump to content

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

Recommended Posts

Posted

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. 

image.png.628e039a993149a12674095e92d03c90.png

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

 

 

 

 

 

 

 


 

Posted

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

image.thumb.png.3fab0b2d86e0322d3769c8b2c550bbaf.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

  • 1 month later...
Posted

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>

 

Screenshot 2024-03-21 at 14.29.41.png

Posted
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

 

Screenshot 2024-03-21 at 14.29.41.png

You can share your site url, we can check easier

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

  • 1 month later...
Posted

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.

  • 2 months later...
Posted (edited)

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?

 

Screenshot 2024-06-28 at 11.26.14.png

Screenshot 2024-06-28 at 11.27.31.png

 

Edited by Pip1
Posted
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?

 

Screenshot 2024-06-28 at 11.26.14.png

Screenshot 2024-06-28 at 11.27.31.png

Screenshot 2024-06-28 at 11.27.40.png

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

 

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Posted

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?

Posted

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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Posted

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>

 

IMG_3592.jpg

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

 

IMG_3592.jpg

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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Posted
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

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.