# Language Switcher

**URL:** <https://community.hubspot.com/t/language-switcher/76097>\
**Category:** CMS Development\
**Tags:** developer, website-pages\
**Created:** [February 27, 2023, 8:34pm UTC](https://community.hubspot.com/t/language-switcher/76097 "2023-02-27T20:34:34Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![nandinighosh](https://avatars.discourse-cdn.com/v4/letter/n/8c91f0/32.png) [@nandinighosh](https://community.hubspot.com/u/nandinighosh)\
**Post date:** [February 27, 2023, 8:34pm UTC](https://community.hubspot.com/t/language-switcher/76097/1 "2023-02-27T20:34:34Z")

</div>

I’m currently working on customising the language switcher classes and trying to find the html code that structures the \<div class="language\_switcher\_class\> with the \<div class=“globe\_class”\> in it. The default hubspot language switcher module only contains a line of code to specify the display mode. Can anyone help me with where I can find the html code that contains the structuring for the language switcher tab?

---

<div class="post-metadata">

**Author:** ![Jaycee\_Lewis](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jaycee_lewis/32/61352_2.png) [@Jaycee\_Lewis](https://community.hubspot.com/u/Jaycee_Lewis)\
**Post date:** [February 28, 2023, 7:14pm UTC](https://community.hubspot.com/t/language-switcher/76097/2 "2023-02-28T19:14:57Z")

</div>

Hi, @nandinighosh 👋 Thanks for reaching out. Hey, @Stephanie-OG @Indra, can you help @nandinighosh with their project?

Best,

Jaycee

---

<div class="post-metadata">

**Author:** ![Stephanie-OG](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/stephanie-og/32/73267_2.png) [@Stephanie-OG](https://community.hubspot.com/u/Stephanie-OG)\
**Post date:** [February 28, 2023, 8:24pm UTC](https://community.hubspot.com/t/language-switcher/76097/3 "2023-02-28T20:24:51Z")

</div>

Hi @nandinighosh

The code you’re seeing in the Language Switcher module is the [language switcher tag](https://developers.hubspot.com/docs/cms/hubl/tags#language-switcher) and I’m afraid the HTML can’t be edited. However, others seem to have found possible custom solutions on threads like [this one](https://community.hubspot.com/t5/CMS-Development/Custom-language-switcher-Language-switching/m-p/269251).

What kind of customizations are you trying to do? I’ve managed to make it look fairly different using CSS only. You could have something like side-by-side language options:

![langauge-switcher--side-by-side.png](https://d2qpr2jzcazej7.cloudfront.net/original/2X/5/50446c9fe61f1a995ffca05c4be322cd6052afb4.png)  
Langauge Switcher - Side-by-side options

Or a customized dropdown:

 ![langauge-switcher--dropdown.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/0/e/0e91e7a095e5981538cac4204a2e26c2e7fc448a.png)  
Langauge Switcher - Custom dropdown

* * *

**Stephanie O’Gay Garcia**

[Freelance HubSpot CMS Developer](http://www.stephanieogaygarcia.com?utm_source=HubSpotCommunity)

[Website](http://www.stephanieogaygarcia.com?utm_source=HubSpotCommunity) | [Contact](http://www.stephanieogaygarcia.com/contact?utm_source=HubSpotCommunity)

---

<div class="post-metadata">

**Author:** ![nandinighosh](https://avatars.discourse-cdn.com/v4/letter/n/8c91f0/32.png) [@nandinighosh](https://community.hubspot.com/u/nandinighosh)\
**Post date:** [February 28, 2023, 8:33pm UTC](https://community.hubspot.com/t/language-switcher/76097/4 "2023-02-28T20:33:55Z")

</div>

Hi Stephanie!

Thank you for your response! I’m trying to edit my language switcher css so that instead of the menu appearing on hover over just the globe icon, the menu appears if I hover over the entire capsule containing the icon and language label.

![Screenshot 2023-02-28 at 3.32.23 PM.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/9/9/992a886b0b1a0fc0c8a3ae6895e2fba1edd7d27d.png)

As of now this is what happens:

 ![Screenshot 2023-02-28 at 3.32.28 PM.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/f/c/fc0af61fa8261ca754b6bb573630b377c331b949.png)

Thanks!

---

<div class="post-metadata">

**Author:** ![Stephanie-OG](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/stephanie-og/32/73267_2.png) [@Stephanie-OG](https://community.hubspot.com/u/Stephanie-OG)\
**Post date:** [February 28, 2023, 9:23pm UTC](https://community.hubspot.com/t/language-switcher/76097/5 "2023-02-28T21:23:01Z")

</div>

It you set the hover on the parent element that contains everything it should work. For example, on [HubSpot’s boilerplate theme](https://boilerplate.hubspotcms.com/) ([GitHub](https://github.com/HubSpot/cms-theme-boilerplate)) it’s wrapped in the `header__language-switcher` class in the header global group like this:

```lia-code-sample
{% if content.translated_content.values()|selectattr("published")|length || is_listing_view && group.translations %}
 <div class="header__language-switcher header--element">
 <div class="header__language-switcher--label">
 {% module "language-switcher"
 path="@hubspot/language_switcher",
 label="Language switcher",
 display_mode="localized"
 %}
 <div class="header__language-switcher--label-current"> {{ locale_name(locale) }}</div>
 </div>
 </div>
{% endif %}

```

And so the CSS is:

```lia-code-sample
.header__language-switcher .lang_list_class {
 border: 2px solid;
 border-radius: 3px;
 box-shadow: 0 2px 9px 0 rgba(0, 0, 0, 0.2);
 display: block;
 left: calc(100% - 24px);
 opacity: 0;
 min-width: 100px;
 padding-top: 0;
 text-align: left;
 top: 100%;
 transition: opacity 0.3s;
 visibility: hidden;
}

.header__language-switcher:hover .lang_list_class,
.header__language-switcher:focus .lang_list_class {
 opacity: 1;
 transition: opacity 0.3s;
 visibility: visible;
}

```

If you mean centering the dropdown (the `lang_list_class`), you could update the positioning of the CSS above, like this (I updated the left property and added a transform property):

```lia-code-sample
.header__language-switcher .lang_list_class {
 border: 2px solid;
 border-radius: 3px;
 box-shadow: 0 2px 9px 0 rgba(0, 0, 0, 0.2);
 display: block;
 left: 50%;
 opacity: 0;
 min-width: 100px;
 padding-top: 0;
 text-align: left;
 top: 100%;
 transform: translateX(-50%);
 transition: opacity 0.3s;
 visibility: hidden;
}

```

And then the before and after pseudoelements like this to center the arrow:

```lia-code-sample
.header__language-switcher .lang_list_class:before {
 left: 50%;
 top: -25px;
}

.header__language-switcher .lang_list_class:after {
 left: 50%;
 top: -22px;
}

```

But your code could also be different if it’s not based on the boilerplate. If you could send a link I can always take a look.

* * *

**Stephanie O’Gay Garcia**

[Freelance HubSpot CMS Developer](http://www.stephanieogaygarcia.com?utm_source=HubSpotCommunity)

[Website](http://www.stephanieogaygarcia.com?utm_source=HubSpotCommunity) | [Contact](http://www.stephanieogaygarcia.com/contact?utm_source=HubSpotCommunity)

---

<div class="post-metadata">

**Author:** ![nandinighosh](https://avatars.discourse-cdn.com/v4/letter/n/8c91f0/32.png) [@nandinighosh](https://community.hubspot.com/u/nandinighosh)\
**Post date:** [March 1, 2023, 6:07pm UTC](https://community.hubspot.com/t/language-switcher/76097/6 "2023-03-01T18:07:32Z")

</div>

Hi Stephanie,

Thank you so much! I’ll try setting the transition on the parent class instead of just the globe subclass and see if that helps. I appreciate the in-depth code snippets.

---

<div class="post-metadata">

**Author:** ![nandinighosh](https://avatars.discourse-cdn.com/v4/letter/n/8c91f0/32.png) [@nandinighosh](https://community.hubspot.com/u/nandinighosh)\
**Post date:** [March 1, 2023, 7:26pm UTC](https://community.hubspot.com/t/language-switcher/76097/7 "2023-03-01T19:26:52Z")

</div>

This is the relevant CSS code I have:

```lia-code-sample
.header__language-switcher {
 margin-left: 25px;
 background: #ebeff0;
 padding: 0 10px;
 border-radius: 20px;
}
.header__language-switcher--label {
 display: flex;
 align-items: center;
}
.header__language-switcher--label-current {
 font-size: .8rem;
 line-height: 26px;
 color: #20252e;
 font-weight: 600;
 letter-spacing: .075rem;
 text-transform: uppercase;
}
.header-left .lang_switcher_class {
 display: block;
}
.header-left .globe_class {
 margin-right: 10px;
 width: 16px;
 height: 16px;
}
.header-left .lang_list_class {
 left: calc(50% - 5px);
 box-shadow: 0 10px 30px -10px rgb(32 37 46 / 20%);
 border-bottom-left-radius: 8px;
 border-bottom-right-radius: 8px;
}
.header-left .lang_list_class li {
 border-left: none;
 border-right: none;
 background-color: #444e61;
}
.lang_list_class li a {
 color: #f4f5f6 !important;
 transition: all 0.2s ease;
}
.lang_list_class li a:hover {
 color: #ffffff !important;
}
.header-left .lang_list_class li:first-child {
 border-top: none;
 border-top-left-radius: 8px;
 border-top-right-radius: 8px;
}
.header-left .lang_list_class li:last-child {
 border-bottom: none;
 border-bottom-left-radius: 8px;
 border-bottom-right-radius: 8px;
}
.header-left .lang_list_class:before, .lang_list_class:after {
 border-bottom-color: #444e61 !important;
}

```

The HTML is:

```lia-code-sample
<div class="header__language-switcher header--element">
 <div class="header__language-switcher--label">
 {% module 'language-switcher' path='@hubspot/language_switcher',
 label='Language switcher',
 display_mode='localized'
 %}
 <div class="header__language-switcher--label-current"> {{ locale_name(locale) }}</div>
 </div>
 </div>

```

---

<div class="post-metadata">

**Author:** ![Stephanie-OG](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/stephanie-og/32/73267_2.png) [@Stephanie-OG](https://community.hubspot.com/u/Stephanie-OG)\
**Post date:** [March 2, 2023, 7:55pm UTC](https://community.hubspot.com/t/language-switcher/76097/8 "2023-03-02T19:55:17Z")

</div>

The HTML is the same as the boilerplate’s and the CSS looks like a modified version but I’m not seeing anything there with any hover effect. I think the CSS I sent should work.

If not, if you could send me a link to the page I can take a look.

* * *

**Stephanie O’Gay Garcia**

[Freelance HubSpot CMS Developer](http://www.stephanieogaygarcia.com?utm_source=HubSpotCommunity)

[Website](http://www.stephanieogaygarcia.com?utm_source=HubSpotCommunity) | [Contact](http://www.stephanieogaygarcia.com/contact?utm_source=HubSpotCommunity)

---

<div class="post-metadata">

**Author:** ![ZAswad](https://avatars.discourse-cdn.com/v4/letter/z/4da419/32.png) [@ZAswad](https://community.hubspot.com/u/ZAswad)\
**Post date:** [May 12, 2023, 2:04pm UTC](https://community.hubspot.com/t/language-switcher/76097/9 "2023-05-12T14:04:33Z")

</div>

That is great, but please can you help where I can add this code to be shown as a template to the global content?

---

<div class="post-metadata">

**Author:** ![LaMartins](https://avatars.discourse-cdn.com/v4/letter/l/8edcca/32.png) [@LaMartins](https://community.hubspot.com/u/LaMartins)\
**Post date:** [March 31, 2023, 10:03pm UTC](https://community.hubspot.com/t/language-switcher/76097/10 "2023-03-31T22:03:40Z")

</div>

Hi @Stephanie-OG  
Could you help me to display only the first two letters of the language? I mean, for English, only display “EN” on the language switcher - like both images you’ve just presented as an example.  
I’ve tried something similar to the code below but isn’t working.

{% set locale\_name = lambda locale: locale[‘display Language’][0:2]|upper %}  
Thanks a lot!

---

<div class="post-metadata">

**Author:** ![Stephanie-OG](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/stephanie-og/32/73267_2.png) [@Stephanie-OG](https://community.hubspot.com/u/Stephanie-OG)\
**Post date:** [April 1, 2023, 1:39pm UTC](https://community.hubspot.com/t/language-switcher/76097/11 "2023-04-01T13:39:16Z")

</div>

@LaMartins - I’ve just used JavaScript to do it in the past:

```lia-code-sample
// Switch language switcher text (e.g. from "English" to "EN")
langLinks.forEach(function (item) {
 var langLink = item;
 var language = langLink.dataset.language;
 langLink.text = language.toUpperCase();
});

```

But a HubL option would be nice because sometimes you can see the transition on load.

---

<div class="post-metadata">

**Author:** ![Stephanie-OG](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/stephanie-og/32/73267_2.png) [@Stephanie-OG](https://community.hubspot.com/u/Stephanie-OG)\
**Post date:** [April 1, 2023, 1:43pm UTC](https://community.hubspot.com/t/language-switcher/76097/12 "2023-04-01T13:43:45Z")

</div>

@LaMartins - [this](https://community.hubspot.com/t5/CMS-Development/Adding-the-language-switcher-in-the-navigation-menu/m-p/419303/highlight/true#M21789) solution by @Anton looks like a possible custom HubL solution you might want to check out!

---

<div class="post-metadata">

**Author:** ![ZAswad](https://avatars.discourse-cdn.com/v4/letter/z/4da419/32.png) [@ZAswad](https://community.hubspot.com/u/ZAswad)\
**Post date:** [May 25, 2023, 2:10pm UTC](https://community.hubspot.com/t/language-switcher/76097/13 "2023-05-25T14:10:39Z")

</div>

Hello Stephanie,  
Please can you direct me on how to change the language Switcher Icon to the Canada flag?