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

try #collection-xxxxxxx nav#main-navigation ul > nth-child(n) {display:none;}

and

try #collection-xxxxxxx nav#mobile-navigation ul > nth-child(n) {display:none;}

Share this post


Link to post
  • 0

I’m using the Native template and I have tried everything listed on this post to hide pages (topNav, mainNav,etc.) without any success. I’m real beginner at finding the source code for the navigation menu. Could anybody tell me what “keywords” I should write in the custom CSS to hide the pages.

Thanks

vincent-lefebvre.squarespace.com

Edited by music

Share this post


Link to post
  • 0

I also use the adirondack template and the first one you suggested worked beautifully.

Thank you so much, this had been driving me crazy!

Any idea how to achieve the same thing in the footer section this time ?

Share this post


Link to post
  • 0

The easiest way to have a bilingual site is to use a piece of javascript I originally wrote for Shopify.

Insert the code in the code injection footer area then you're set.

Find out more here: www.affiliatewebdesigners.com/product/multilingualizer/

It works for all languages, is SEO friendly, and it's very easy to use.

Edited by davehilditch

Share this post


Link to post
  • 0

I have a bilingual site that I created with SS with a landing page. Once you chose your language, then you get into the section of my site where everything is in the language you selected. I used folders for the navigation, in order to have only "English" and "Español" as options (and the home). This also allows for readers to be able to easily come back to the selected language--since there is much interaction within the two sections. Here is the link if you want to check how it works:http://www.ebglobal.org/Moisés

Share this post


Link to post
  • 0

This has been very helpful! I've tried it on the Adirondack template and seemed to be working. However now I've changed to the Marquee template and I can't seem to find a way to hide pages. If anyone could suggest the code to use in Marquee I'd be very grateful! Thanks.

Share this post


Link to post
  • 0

Oh, I think I may have come up with a way that works! In case anyone needs it: .collection-xxxxxxxxxxx #header .nav-wrapper ul>:nth-child(x) {display: none;}

Share this post


Link to post
  • 0

Hi everyone! Not sure if this is still active but I need some help. I've been trying for a day and a half to get this to work on my page http://www.azadaz.org/ with no luck. What it boils down to is I can't find a collection ID for any of my pages or folders. The blogs and galleries seem to have them, but the pages are all IDed by just their url slug. Was there a change in SS7 that made this method no longer work? Am I missing something obvious? Thank you!

Share this post


Link to post
  • 0

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!

Share this post


Link to post
  • 0

Localizejs.com works, but don't expect miracles.Your site will still be messed up with not translatable hard coded elements like 'Your form has encountered a problem. Please scroll down to review' and similar.


"Yes the preview window expanding randomly is annoying isn't it?
We were just having a laugh about how long it has been like that."
584529363_fuzzypanelopener.gif.98d1a30153469a319fbde647eae7f492.gif 

Share this post


Link to post
  • 0

Hi

I used this method and it works really well. I have a English/Hebrew site and still have one issue on mobile that I am trying to solve and that is that I have to rearrange the Hebrew mobile menu, so it also displays from top to bottom like the English menu. The Hebrew menu runs from right to left on the desktop so naturally it displays from bottom to top on mobile, any ideas how I can rearrange the menu for the Herbrew mobile version only?

Your replies appreciated.

Share this post


Link to post
  • 0

Hello,

I am so happy that this tutorial helped so many people create multilingual sites and probably now I need some help too. This tutorial was made to hide links from Montauk's (SS6) navigation bar. Now I changed my template to Five (SS7) and I would like to incorporate the trick there too. This:


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

works perfectly for pages and blogs, but when I open an individual post in the blog, the hidden links are visible again. Is there any way to state in the CSS that what ever happens to the blog as a collection should happen in all its individual posts??

Your help would be more than amazing!

Edited by Penia

Share this post


Link to post
  • 0

THANKS for the infosHere's the css code for shift template if anyone needs it:

collection-xxxxxxxxxxxxxxxxxxxxxxx,

collection-xxxxxxxxxxxxxxxxxxxxxxx,

collection-xxxxxxxxxxxxxxxxxxxxxxx,

{ .main-nav ul li:nth-child(x), .main-nav ul li:nth-child(x), .main-nav ul li:nth-child(x) { display: none !important}}

Share this post


Link to post
  • 0

Hi,

I don't get what you need to do with the unlink pages/blogs ?

Even If I use them as test, nothing works with Hayden template.I am stuck.

Thank you.

Share this post


Link to post
  • 0

Ok, so I figure out that Hayden was working like Bedford. This worked out and I had to do it for every pages and it is just fine.

collection-xxxxxxx #headerNav #mainNavWrapper nav>:nth-child(x) { display: none}

I used google chrome web developper to view the exact collection id of every pages, it was more accurate.

Share this post


Link to post
  • 0

Hi Everyone,

I am trying to do the same for the Galapagos theme and was trying all different versions of .collection-xxxxxxxxxx # ... nav>:nth-child but I can't figure it out. Can someone help me with the right Custom CSS code for Galapagos?

Also, I am not sure yet, how I would integrate the link "deutsch" or "english" for the visitor to actually get to the german or english pages. Does anyone know how I would need to do that?

Thank you very much for your help. This forum is pretty helpful already for lots of little problems I had so far. I was reading every answer and post for this question, but this one is a tricky one for me. So I hope someone has an idea!

Share this post


Link to post
  • 0
Guest

Hello,

Here’s my website page: https://atom3dp.squarespace.com

My web site’s template is Devlin

I have tried every options of this post (main-nav, topnav,…), but still nothing happened

I tried to search "nav id” from source code but nothing could be found

I noticed that @sssuperguy mentioned that Devlin has unique way to deal folders,

but unfortunately the link is missing now, so can someone help me what the suitable code is for Devlin template?

Any help would be appreciated, thanks a lot!

Share this post


Link to post
  • 0
Guest

I have a landing page with each language where the user can click on. This directs the user to the (selected language) Index page

The index page shows several pages on one page.

Is it possible to have multiple indexes and have only shown? So maybe a better question, can you hide index pages?

When I look into the source of the Index it points to various page id's, I have added all of these but this didn't work.

I'm running the template Marquee

Thanks for your help.

Share this post


Link to post
  • 0

Need help hiding index in man nav bar and on mobile. I've set up a "multilingual site" but really just set up two locations. Once a customer clicks "New Jersey" on cover page, I don't want the florida or new jersey indexes to appear. I'm assuming I need to display:none, but I'm not sure where to place the code (do I need to enable developer?) or exactly how to write it. I would like to do the same process in the florida section as well. Here is a link to site:

http://brendanbuyshouses.com/

The url-slug for the new jersey index is /new-jersey The url-slug for the florida index is /florida

Thanks in advance.

Share this post


Link to post
  • 0

I have the Pacific template and that code example:

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

it's not working....is it normal ?

Share this post


Link to post
  • 0
Guest

Does anybody already checked out the exact code for the marquee-template?

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