Tutorial: how to hide pages in navbar ( for multilingual sites )

So on your sites configuration page (see the picture below for the steps):

1. Create your blogs/pages and move them in the "Not linked" area.
2. In the "Top Navigation" (the linked) area create the links for the navbar in both languages. eg. Let's say that we have an A, B page for English and an A', B' for Greek
3. When clicking on each blog(that in the unlinked area (eg the English or Greek Version for me), you can see its unique id up the url's area. Copy-save them somewhere.
4. Go now to Style Editor > Custom CSS
5.  
    
   The code that we will need is:

   .collection-52[…]d3 {#topNav nav ul>:nth-child(n1),#topNav nav ul>:nth-child(n2) { display: none }}

   What you should change in that code:
   
   • collection-52[…]d3 > write your own blog ID here from step 3.
   • nth-child(n) > in the “n”s place you will write the number of the page that you want to hide in the lit of pages.
      
     For example: I have the A, B, A', B' pages, in the English blog I will hide the A', B' (the Greek ones) and vice versa. So for my English site, in order to hide the 3rd and 4rth pages that are Greek, the codes will be:

     .collection-52249736e4b022f2da85d4d3 {#topNav nav ul>:nth-child(3),#topNav nav ul>:nth-child(4) { display: none }}

     
     And for the Greek blog, the same:

     .collection-52249736e4b022f2da85d4d3 {#topNav nav ul>:nth-child(1),#topNav nav ul>:nth-child(2) { display: none }}

Got it? It's easy peesy lemon squeezy! And thanks again @rwilson for this (he answered my question on that post on the first place).

By the way I have the Montauk template. UPADATE: This method works in SS6 and SS7 Montauk template.

UPDATE - For Five Template (SS7)

#collection-xxxxxxxx #main-navigation ul li:nth-child(number) { display: none}

works perfectly!

To say it's anyone's tactic to attract customers by overcomplicating things on this forum is quite a reach.

It's much more complicated than "just applying CSS", because to fully understand [A] what you want to do in your site is one thing. For a developer to understand the platform and [C] relay it on a forum back to a client is another thing.

If you're spinning your wheels for a week and are getting frustrated by the limited FREE support on the Answers site, then hire a developer to make things happen for you!

Go here: http://specialists.squarespace.com

Okay, I used this method successfully with the Dovetail template, but the problem is that when I hide (for example) the "second child" in my main navigation, it also hides the "second child" of any folders I have. For example, I typed

.collection-534d7eb8e4b086578f1df960 #topNav nav ul>:nth-child(2){display: none;}
.collection-534d7eb8e4b086578f1df960 #topNav nav ul>:nth-child(3){display: none;}

And now the second and third items of my folder ("????????") are hidden. (Normally there are three pages in the folder.) Help? Maybe @rwilson? Ideas on how to fix this? Here's what it looks like:

Compare with the English version (which hides nth-child(7-13) instead):

The reason that I republished that answer, was to have it in a one place nice and clean for all these people who seek a solution for their multilingual sites for so long.

The problem is that when I was searching for such a solution (for the record for over a week), nobody seemed to know such a simple CSS code. It's amazing how many questions exist in this forum without a single answers. @rick davy covered on this post how hard is to get answers in here. And I agree completely with him.

The fun thing is that in this some-god-should-name-it-a forum I have spotted a lot of good programmers and all of them found my problem "such a really complicated problem, that could be solved only with extreme Javascript magic". What a discouragement, right? However, if I asked them to give me any solution and I would pay them for this, they could come up with a great code just for me. And I heard really funny rewardsfor that "extreme Javescript code" my friends.

At last, I had all world's luck and @rwilson answered me. The code was an one-line's pityfull CSS code. And if you gentlemen and great programmers are reading this, that tactic of yours is called un-pro-fe-ssio-nal. And a pathetic way of attracting customers too.

UPDATE:

Answering to @lizal : Yeah I had the same problem too. If you want to hide folders instead of pages, the pages inside of the folders are influenced too. So, here's what I did. It may not be the best answer, but it rolls good.

As I can see in your navbar you have mainly folders (but you can have pages too).

So as an example: let's say that you have 8 pages in the navbar. The first 4 in English & the other 4 in your X language (is it Russian? I am so sorry I don't know that alphabet. I hope that it's ok to call it "X" for that example. ). So you hide the 1-4 in the "X" blog & the 5-8 in the English one. But as you already noticed, in the English blog if you have in your folders more than 4 pages/links, the 5th-8th will be hidden too and in Russian the 1st-4th pages/links in the folders will be hidden too.

So go to the configuration page and add in the folders blank links in the positions that would be hidden. So the "X"'s language's folders in the 1-4 positions add some blank links ( no links and blank names) and then your own pages/links and the some thing in the English blog's folders.

See what I did: this is a folder from my English Blog & in the English blog I hide the 4-6 + 8 pages cause they are the Greek blog's. So if my pages in folders would be influenced too. So I created in the 4-6 + 8 positions blank links. Some thing in the Greek blog, but in different positions.

I hoped that I answered sufficiently. :)

Thanks @Penia !!Good idea. It's a little messy but it works. :) Anyone looking at the normal site can't tell.

Since my template (Dovetail) uses a submenu on all these pages, I added this code to the pages in the folder to hide the "extra" links on the submenu:

#folderNav nav ul>:nth-child(2){display: none;}
#folderNav nav ul>:nth-child(3){display: none;}

...and so on. So, it went from this:

to this:

PS: Yes, Russian :)

This basic tutorial on "Useful :nth-child Recipes" will probably be helpful for you: http://css-tricks.com/useful-nth-child-recipies/

You can quickly see how you could turn-on/off select links within a menu.

Using this technique is how I combined the main nav + 'utility' nav on the following site, which is the same way you could add multiple languages (on multiple menus) http://www.ocpedsneuro.com/

The problem: the utility nav items weren't available on the mobile menu, because they are literally two separate UL menus.

The solution: add the links to your main navbar and hide/show them when necessary.

you have to check the source code of your page(s). In ADIRONDACK it seems to be #main-navigation instead of #topNav.

After trial and error, I found this to work for hiding menu items on mobile devices and on on PCs. You will need to add these 2 lines of code for every menu item to be hiden on each page (X=menu item number):

.collection-YOURCOLLECTIONID #topNav nav ul>:nth-child(X) {display: none;}

.collection-YOURCOLLECTIONID #mobileNav nav ul>:nth-child(X) {display: none;}

An alternative to hiding pages is to use a service like Localize.js that lets you translate your website without creating duplicate Squarespace pages.

Tutorial here: https://localizejs.com/docs/integrations/squarespace

Right click on your site when in viewing mode not editing mode and then click on 'View page source', if you scroll down to line 234-5 (the line numbers are on the left of your screen) you will find the ID that looks something like this:

id="page-5511ec39e4b07319c3fbb678"

Use only the numbers!

Hey guys,

After a super long time digging around the interwebs, I finally found the solution in some custom code.

I used it on one of my sites http://redmedellin.com/

It is a bit of a complicated process so I spend some time creating a walkthrough to make it easy for even non-coders to implement.

Check it out here: https://www.pareto-design.com/squarespace-multilingual

Hi Penia,

Thanks a lot for this! Your idea works great on desktop display. I applied this to every page on my site, that is hiding the menu items linking to the other language. To use the non-linked "area" was not necessary.

However, unfortunately the mobile navigation is not effected by this tweak – at least in the Momentum template. The "ul>:nth-child(n)" thing does not seem to work.

Any ideas anyone?

Hello,I tried different ways, and Nick Scolas does not seem to work anymore with (updated ?) templates... This way seems to work for everyone, recently..., I am a not a specialist and work slowly my way through, and I managed until now, but somewhat I don't understand everything, like I am missing steps... could someone re-detail me the above mentionned procedure ? I don't get for example why in the linked section there are not the pages but folders. Should there be for each unlinked page a linked one that stands for the nav bar but is empty on itself ? ... thank you very much !

You can make folders with pages inside or just pages as menu items – that's of no concern for this procedure. Also, at least for me, the "not-linked area" had no importance. I set up the pages/folders in the Main Navigation area. Then, in the Custom CSS I listed every page (using its .collection-(id), which I wanted the tweak on.BUT this does not work for the Mobile Navigation (MOMENTUM template), at least I have not found out, yet, how to address certain menu items/links.

I had the same problem too and I decided that I would prefer to deactivate the mobile view, rather than go back to the non-multilingual site of mine. I will do that until another good idea is available.You do so by going to: Configuration Page/Settings/General/Template Settings and there tick on the "Disable Mobile Styles"

mmm, no, that is not an option ...

Hi ! me again,Ok I tried but id does not work at all... I dont know what I am doing wrong... So I have : - French pages and English pages, 10 of each (out of which a blog for each language, but with this method I am thinking of something bilingual to keep only one Blog). - Navigation bar, only one folder - I would like that the all english pages are hidden in the nav when you are on any french page and vice versa... - I created two links for language choice, i did this in code injection and in admin, like this : "

For the hiding of the nav bar :.collection-XXXXXXXXXXXX (french page ID) #topNav nav ul>:nth-child(11 "english page") {display: none;}

Everything displays.... I am a really not a spacialist... thanks again for your help

When you do this with code injection you have to put the code in However, I recommend to do this via Custom CSS! Click on "view page". On the button in the right bottom corner click the "brush icon" and the "style bar" appears on the left.On the very bottom is the button "Custom CSS". Click on that.Use the window that opens to insert your code as described above. This code will be attached to the "site.css" and overwrites the styles in it. Sometimes you will have to include "!important" to get it effective. Check this CSS-Tutorial http://www.w3schools.com/css/default.asp

Here is the video tutorial by Nick Scola:

Thanks Crucco !Also for the tutorial of Nick Scola... that one I have OK... I worked on it and I manganed to set it up in code injection and CSS you are describing but for some reason it does not work with my new template (aviator)... I am going to try the

Hello,

I have, as well as Penia, been searching for a way to hide pages in order to do an English version of our site.

I have tried with the code, but it doesn't seem to be working? Could it have something to do with our template Minsk, since it doesn't say Top Navigation, where the linked pages are located, but instead Main Navigation?Our website is www.gooddesign.dk

I really hope that someone can help us...

I also tried writing more specifically "page-collection" in an attempt to exclude the pages in the folders, but I got the same result.

.collection-534d7eb8e4b086578f1df960 #topNav nav ul li.page-collection:nth-child(2){display:none}
.collection-534d7eb8e4b086578f1df960 #topNav nav ul li.page-collection:nth-child(3){display:none}

I am having the same problem as Liza with hiding the menu items of the site.

@crucco Hmmm I am really sorry, but I can't come up with a solution. Maybe somebody else with more knowledge on templates and coding. I am sorry that I couldn't help.