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

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

Question

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

Share this post


Link to post

Recommended Posts

  • 0
Guest

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

Share this post


Link to post
  • 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.

Share this post


Link to post
  • 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!

Share this post


Link to post
  • 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 ...

Share this post


Link to post
  • 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.

Share this post


Link to post
  • 0
Guest

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>
       </li>

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

Share this post


Link to post
  • 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 !

Share this post


Link to post
  • 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

Share this post


Link to post
  • 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!

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 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


You can send your question to my email to get faster answer. I provide free priority support in this crazy time. 

Forum: I usually answer questions at 2pm - 5pm EST

How to Setup Password & Share URL - Squarespace Free Templates - Free Code - CSS ID List

Share this post


Link to post

Create an account or sign in to comment

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


×
×
  • Create New...