How to Add Language Code Next to HubSpot Language Dropdown

By default, when you visit a page with a translation, it displays a globe icon. I thought it would be more helpful to have a visual cue for your current language. So I wrote the code below to add the current language code next to the globe icon.

Javascript

Add this to your main theme javascript file.

// if the language dropdown exists on the page
if( $('#languageTemplate').length ) {
    // get the html language and languages list
    const $languageUL = $('#languageTemplate .lang_list_class');
    const $theLanguage = $('html').attr('lang');

    // if the anchor link matches the document language make it active
    $( $languageUL ).find("a").each(function() {
        if ($(this).data('language') === $theLanguage) {
            $(this).addClass('active-item');
        }
    });

    // Append the language code next to the globe class
    $('#languageTemplate .globe_class').append('<div class="langdigit">'+$theLanguage+'</div>');
// translation exists
}

CSS

Add this to your main theme css file.

#languageTemplate {
  margin-right: 25px;
}

#languageTemplate > span{
  display:block;
  height:20px;
}

#languageTemplate .langdigit {
  position: relative;
  right: -15px;
  padding: 0 0 0 10px;
  font-size:14px;
}