How to Add Language Code Next to HubSpot Language Dropdown


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.

Table of Contents

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

 


Written by: Jake Lett
Jake Lett is a results-driven B2B marketing consultant with 15+ years of experience helping businesses boost online visibility, generate qualified leads, and increase sales. Specializing in SEO, HubSpot, and PPC campaign management, Jake leverages proven strategies to deliver measurable growth. As a Certified Google Ads Specialist and HubSpot Developer, he is committed to driving impactful results for his clients.

Related posts

Tags: ,

Want to Get Email Updates of New Articles?

Join My Email Newsletter