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

Update: I posted a new tutorial on hiding links in navbar here, in case you are interested

I see that a lot of people have the same kind of problem and the root of it is that there isn't any effective way to have a bilingual SS6 site.

So if you want to make a bilingual site what are your options?

• the Google Translator, which is no option for me
• this method by SS, no an option either

After a lot of research and brainstorming I came up with the conclusion that you can:

• Create a blog/page in your primary language of choice (X- for me that's GREEK VERSION)
• Duplicate each page/blog(for blogs must be done manually), modify its language (to Y- eg ENGLISH VERSION) and move them to the unlinked pages section, so their links won't be in the nav-bar
• In "Top Navigation" add the pages' links that you want to appear in the navigation bar eg About page, Contact etc in both languages
• Then with a simple CSS code you can hide the X language's pages from the Y language's blog and vice versa.
• So your in your English blog will appear only English pages, info in the nav bar, in Greek only Greek etc. You got it!
• You can put on your sidebar 2 flags or something like this and you can switch between your X-Y language blogs/pages

So, all you need is that damn code. So, the code is below and it's the kind answer by: @rwilson and is given here !

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!

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.

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

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...

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):

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.

I have found that too, but it seem not to work in SS6

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. :)

In your template as I can see what is called "TopNavigation" in my template is called "header-wrapper". So instead of #topNav , try #header-wrapper and tell me if it is fixed.

Happy to helped :)

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.

Yeah I know, probably someone with more knowledge on coding will provide something less messy.

Oh that's great, happy to helped anyway :)

Dear Penia,

Thank you so much for your help!It works and we really appreciate your time and answer.

Thanks!