fbpx

Hide active language in Squarespace menu

Questions & AnswersCategory: QuestionsHide active language in Squarespace menu
Naomi asked 3 years ago

Is there a way to hide the language selector for the current active language on the page in Squarespace? For example, if somebody is looking at the English translation they would only see the ‘Dutch’ button in the menu and vice versa. It would most likely require a way to target the active language menu item using CSS, however I haven’t found a way to do that. 
Thanks in advance for any help / assistance!

3 Answers
Dave Hilditch Staff answered 3 years ago

Yes – you can do this – the currently active language has an additional CSS class called ‘active’ so you can add this to your CSS to hide the active language:
.language.active { display:none!important; }

Dave Hilditch replied 3 years ago

I’ve submitted another answer based on your site – let me know if it works for you

Naomi replied 3 years ago

Not live yet but this should work for now: http://www.naomidenbesten.nl/naomi

Dave Hilditch replied 3 years ago

Can you provide a link to your site?

Naomi replied 3 years ago

Hi Dave, thanks for your answer. I am using external links in the Squarespace Menu though, not the floating language selector. It does not seem to work there, as the .language and .language.active classes are not applied. Am I missing something? Or is there another solution? Thank you!

Dave Hilditch Staff answered 3 years ago

The alternative answer, if you’re using your menu system rather than the floating language selector is as follows:
A class is added to your body element depending on your language selected. The class will be language0 or language1 or language2 etc.
That means you can style whatever you like according to your currently active language.
Here’s a specific example for Naomi’s site – in her case, the menu items have the .nav-item class and English is the 4th menu item and Nederlands is the 5th menu item. So in her case, the following will hide the active language from her menu:
body.mllanguage0 .site-navigation .nav-item:nth-child(4) { display:none!important;}
body.mllanguage1 .site-navigation .nav-item:nth-child(5) { display:none!important;}

Dave Hilditch Staff replied 5 months ago

Hi – put the CSS code into Design -> Custom CSS

ivan Souza replied 5 months ago

Hi.
Hello. I followed the discussion and tried to do in the site that I am developing. But in my case it did not work.
I have a doubt that is the code that you provided I should put in the code injection or the part of Design -> Custom CSS?
What part of the code do I have to put in?
It is a squarespace site and the address is
http://www.ninaguimaraes.com.br

Can you help me, please?

Per-Leif Bersvendsen replied 2 years ago

Hi Dave. It’s not working in my squarespace site. It has has the forte template if that has anything to say. https://www.element.no

Dave Hilditch replied 3 years ago

Cool – just bear in mind you’ll have to change those numbers if you add extra menu items. e.g. if you add an extra menu item before English and Nederlands then you’d need to alter nth-child to 5 and 6 instead of 4 and 5

Naomi replied 3 years ago

Thanks so much Dave, this works perfectly!

Naomi replied 3 years ago

Thanks so much Dave, this works perfectly!

answered 3 years ago

We are happy that your issue was resolved, please do not hesitate to contact customer support again should you have any further issues or inquiries. I am moving the question to resolved.

mathieugibert replied 2 years ago

Hello.

I set multilingualizer code on my SquareSpace website ( Basil template). I would like to hide specific button in the navbar of my website (valhallarace.com) depending of the language display (actually language selector and a booking button). I injected the code you gave above :

body.mllanguage0 .site-navigation .nav-item:nth-child(4) { display:none!important;}
body.mllanguage1 .site-navigation .nav-item:nth-child(5) { display:none!important;}

But that doesn’t work. I already use some code line to hide specific link (as index), do you know if that create issues with your code line ?

There is the code I use to hide some button :

.Header-nav-item:nth-child(3) { display: none !important;}
.Header-nav-item:nth-child(6) { display: none !important;}

Thank you for the help 🙂

Woofybot
Ask our bot anything