Language Switcher

[nandinighosh]

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?

[Stephanie-OG]

Hi @nandinighosh 

The code you're seeing in the Language Switcher module is the language switcher tag and I'm afraid the HTML can't be edited. However, others seem to have found possible custom solutions on threads like this one.  

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 options

Or a customized dropdown:

Langauge Switcher - Custom dropdown

---

Stephanie O'Gay Garcia

Freelance HubSpot CMS Developer

Website | Contact

[ZAswad]

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

[LaMartins]

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!

[Stephanie-OG]

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

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

[Stephanie-OG]

@LaMartins - this solution by @Anton looks like a possible custom HubL solution you might want to check out!

[nandinighosh]

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.

As of now this is what happens:

Thanks!

[Stephanie-OG · Accepted solution]

It you set the hover on the parent element that contains everything it should work. For example, on HubSpot's boilerplate theme (GitHub) it's wrapped in the header__language-switcher class in the header global group like this:

{% 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:

.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):

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

.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

Website | Contact

[ZAswad]

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

[nandinighosh]

This is the relevant CSS code I have:

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

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

[Stephanie-OG]

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

Website | Contact

[nandinighosh]

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.

[Jaycee_Lewis]

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

Best,

Jaycee