topic Re: Language Selector: How to hide current language? in CMS Development

Language Selector: How to hide current language?

SD_dev — Mon, 07 Jun 2021 12:33:58 GMT

Hello,

I am using the built in hubspot language selector.

My site is available in two languages. I'm wondering if anyone knows how to hide the current language from the menu?

For example my main homepage is in English, when people hover over the globe icon, they see a list of English and Espanol (es). I would like them to only see Espanol, as the english is already present.

Vice-versa when they go to the spanish version of the site, I would like them to be presented with only English when they hover over the language selector.

I tried to go into the module code but there was not much there and the documentation does not discuss customisation options.

does anyone know how?

Thank you

Re: Language Selector: How to hide current language?

dennisedson — Mon, 07 Jun 2021 15:31:41 GMT

@dbeau79 how does your team handle this?

Re: Language Selector: How to hide current language?

piersg — Tue, 08 Jun 2021 08:19:12 GMT

Hi @SD_dev, this isn't possible with the default language switcher module. You'll have to create your own. The logic for this is essentially

{% if content.translated_content|length %} {% for item in content.translated_content|sort(False, False, 'language') %} {{ item.language }} {% endif %} {% endfor %}

There's a long thread about custom language switchers here (not just the original question and answer, a few people asked related questions in that thread that I also responded to) https://community.hubspot.com/t5/CMS-Development/Custom-language-switcher-Language-switching/td-p/269251

Re: Language Selector: How to hide current language?

webdew — Tue, 08 Jun 2021 09:46:53 GMT

Hi @SD_dev ,

You need to add this js https://codepen.io/Daanist/pen/JZRXmN

Hope this helps!

If we were able to answer your query, kindly help the community by marking it as a solution.

Thanks and Regards.

Re: Language Selector: How to hide current language?

SD_dev — Wed, 09 Jun 2021 08:33:55 GMT

Got it thank you! I'll try that.

As a quick fix for anyone reading, I notice that Hubspot actually sorts the languages so that the active language is first. Therefore as a quick fix you can actually just use CSS to display: none on the first child (li) element in the list.

E.g. with

.header__language-switcher .lang_list_class li:first-child { display: none }

And then fix your styling so that the hover, and ::before triangle element looks better.

I will look into building a custom module as a cleaner solution.