Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 13

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 !

Edited by Penia
Link to comment
  • Answers 87
  • Created
  • Last Reply

Top Posters For This Question

Recommended Posts

  • 0

Lucky me... I found out by myself.

#desktopNav .main-nav .nav-wrapper ul>:nth-child(x) { display: none};

#mobileNav .main-nav .nav-wrapper ul>:nth-child(x) { display: none};

Edited by Guest
Link to comment
  • 0

There is a much easier way, using the same technique.A lot of multilingual websites use the iso-2 code to differ the urls, e.g. /de/url or /en/url oder de/ordner/seite and en/folder/page. Using this technique together with YUI/JS manipulation is much more robust and does not depend on Ids. It just depends on manipulated Url slugs and a properly configured script:

  • Works for main and secondary nav, mobile nav, layered nav
  • Script remains the same and detects new and deleted pages or modified pages.
  • Script autmatically set html lang tags
  • Script does not depend on order of pages or ids.
  • Script optionally produces a fully styleable and adaptable language menu
  • Script is configurable for each template
  • Script works for all page types: page, collections, links, blogs all you have to do is define url slugs.

I wrote a tutorial for this, take a look here:https://answers.squarespace.com/questions/124120/how-to-build-a-multilingual-site-in-squarespace-7.html

I am a freelance developer situated in southern germany. I offer full service websites, ecommerce. Everything from concept, design, programming, ui, marketing & seo, analytics, hosting up to business consulting. I prefer using open source software like typo3 or magento but i also admire the easiness of saas software and services like squarespace. I spend most of my spare time up in the Alpes.

Link to comment
  • 0

@Penia and @crucco --thanks for all your help here! I have a question: Similar to you, @Penia, I am using the Five template and managed to use this technique for the Main Nav. But when it comes to the Mobile Navigation, I cant figure out what I am doing wrong. Can you provide me with the correct code for the individual pages and CSS editor for Five? The code @crucco provides is not working for some reason... Thanks so much!

Link to comment
  • 0

Thanks for a very promising lead, @Penia and @rwilson!

I am hoping to adapt the methos on theMarquee template, deviding a website into two sections, each with its own set of navigation tabs.

Unfortunately, I cannot seem to get it to work in so far, working with these two versions of the CSS snippet:

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

collection-56c9147d62cd943a1531e460 {#main-navigation nav ul>:nth-child(4) {display: none;}


Maybe I am overlooking something essential?

Any leads would be highly appreciated ...

Link to comment
  • 0

This solution is useless, in order for it to work you need to websites then you wouldn't need to hide nav links you simply create two websites and link them to each other. Whatever you enter into the CSS Editor is global so how can you hide half your links when it is in greek and half your links in english? How does the web page know which language is being used? Makes no sense or you forgot to explain the main point.

Link to comment
  • 0

Thanks a lot for sharing this solution, it's a nice hint for me to achieve what I want to do on my website.

I tried a lot of the things listed above, however it seems that none of them are working with my template which is adversary.I located my page collection id properly, but the template structure seems a but different from the other ones.

The source looks like below:

          <div id="desktopNav" data-content-field="navigation-mainNav" data-annotation-alignment="bottom left">

 <div class="nav-wrapper">
   <ul class="cf">
       <li class="page-collection active-link">
         <a href="/some-path/"><span>Title</span></a>

Would anyone have an idea about what code is necessary for hiding some of the navigation links with the adversary template?

Link to comment
  • 0

hi there, many thanks for this tutorial @Penia and @rwilson .

i managed to do this ok, but im now seeking to add the flags to my nav bar and dont seem to hit the right spot for it.

im running montauk, i would need this in order for all this tutorial to make complete sense.

thanks !

Link to comment
  • 0

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, my name is Forrest. I am a founding member of [Pareto Design][1]. Addicted to progress, designing better democracy with tech, & driving youth demand for electric vehicles http://goo.gl/hK1WGZ [1]: http://pareto-design.com

Link to comment
  • 0

hi @Pareto-Design,

First, thank you so much for your multilingual documentation, was really valuable as SP support is not fitting my needs.

Second, for some reason I followed every step on your guide but something is not working as I'm getting the language selector but the actual menu of my single-page disappeared.

Any way to contact you?

Thanks again!

Link to comment
  • 0
On 12/25/2019 at 9:01 PM, Lkw129 said:

Hello, does anyone know how to make this work for Squarespace 7.1? I've been trying to find a solution for a week and I need to hand it tomorrow and I'm about to die from trying to find a solution, can anybody help?

Thank you so much

Try this guide

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...