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

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

Share this post


Link to post
  • 0

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

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

Share this post


Link to post
  • 0

Dear Penia,

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

Thanks!

Share this post


Link to post
  • 0

Hello,I did this in the Ishimoto template and it worked great, but I can't seem to make it work in the Takk template. How do I know if #topNav should be something else? I've tried #header-wrapper and it doesn't work either...Thanks!

Share this post


Link to post
  • 0

thanks! i was looking at that already, i just don't know what would be the equivalent to #topNav in there...

in ishimoto this code worked perfectly:.collection-5355423be4b0768cad0b9aaf #topNav nav ul>:nth-child(2) {display: none}

but with Takk nothing seems to works, i've tried #headerWrapper, #primary-nav, #main-navigation....

this is it right?.collection-5355423be4b0768cad0b9aaf #primary-nav nav ul>:nth-child(2) {display: none}

Share this post


Link to post
  • 0

actually i just switched to Avenue and the Ishimoto code works great so I'm just going to forget Takk... thanks for trying though, i really appreciate it!

Share this post


Link to post
  • 0

GOOD NEWS!

The "data-class-method" as described

is working now.

There must have been a silent update to Squarespace 6 or at least to the Momentum template. So, now hiding navigation items is possible for mobile navigations, too.

Short description:
Put this jQuery code in the [Page] > Settings > Advanced > Page Header Code Injection (Per-Page Code Injection):


$(document).ready(function() {

 $('#mobile-navigation ul li').each(function() {
   $(this).find('a').each(function() {

     var getLink = $(this).attr('href');
     $(this).parent('li').attr('data-class', getLink);

   });
 });
})

Then put the following in the Custom CSS Editor:


    .collection-xxxxx_your-page-id-1_xxxxx,
   .collection-xxxxx_your-page-id-2_xxxxx {
   #mobile-navigation li {
       &[data-class="/your-menu-item-1/"],
       &[data-class="/your-menu-item-2/"]
       {display:none!important;}
   }
}

I hope that helps!

Edited by crucco
improved style

Share this post


Link to post
  • 0

Hi! Soooo happy I found this page but if I could find out what I'm missing here I'd be happier!

I'm using the Adirondack template:

https://eedcchina.squarespace.com/

and want to hide 1-5 for English, and 6-7 for Chinese. I've tried the suggested code above but nothing changes.

Should my #topNav be something else as well? #header-wrapper? #folder-collection?Note some of my top nav items are single pages and some of them are folders. Does this mean I have to enter different names to replace "#topNav" in my code?

Any help would be appreciated!

Share this post


Link to post
  • 0

Thanks crucco! Now thats figured out I entered the following and am still getting no action with the nav bar. Did I do something wrong?

Chinese version:


.collection-536c9139e4b03f5f653f6a00 #main-navigation nav ul>:nth-child(6) {display: none;}
.collection-536c9139e4b03f5f653f6a00 #main-navigation nav ul>:nth-child(7) {display: none;}
.collection-536c9139e4b03f5f653f6a00 #main-navigation nav ul>:nth-child(8) {display: none;}
.collection-536c9139e4b03f5f653f6a00 #main-navigation nav ul>:nth-child(9) {display: none;}
.collection-536c9139e4b03f5f653f6a00 #main-navigation nav ul>:nth-child(10) {display: none;}

English version:


.collection-537cc984e4b0c2ee3a3d5015 #main-navigation nav ul>:nth-child(1) {display: none;}
.collection-537cc984e4b0c2ee3a3d5015 #main-navigation nav ul>:nth-child(2) {display: none;}
.collection-537cc984e4b0c2ee3a3d5015 #main-navigation nav ul>:nth-child(3) {display: none;}
.collection-537cc984e4b0c2ee3a3d5015 #main-navigation nav ul>:nth-child(4) {display: none;}
.collection-537cc984e4b0c2ee3a3d5015 #main-navigation nav ul>:nth-child(5) {display: none;}




Edited by eedcchina

Share this post


Link to post
  • 0

Hello everyone,

I have been trying to do the same on my website using Bedford template but nothing works.

I have looked for the source code and tried #mainNav, #mainNavigation, #mainNavWrapper, #headerNav but no results.

Can you please tell me which is the correct id (#) I should use?

Thank you very much!

Share this post


Link to post
  • 0

Hi damnivo,

try

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

or

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

or even

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

If any of this works or you find it out, it would be nice to post here …

Share this post


Link to post
  • 0

try this: .collection-536c9139e4b03f5f653f6a00 nav#main-navigation .nav-wrapper ul>:nth-child(6) {display: none;}

or this: .collection-536c9139e4b03f5f653f6a00 nav#main-navigation nav.main-nav .nav-wrapper ul>:nth-child(6) {display: none;}

or this: .collection-536c9139e4b03f5f653f6a00 nav#main-navigation .main-nav .nav-wrapper ul>:nth-child(6) {display: none;}

Share this post


Link to post
  • 0

Thank you very much Crucco.

I have tried the three alternatives all of them work but I stick with the first one. So the correct code for Bedford is:


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

I have been trying to use also your solution for hiding some pages from the navbar on mobile but it does not work.

In particular I want to remove the "ITA" link from the top navigation of my italian home page since it is the one that links to the italian version of the website.The code I entered is the following:

In the code injection - header:


  <script>
$(document).ready(function(){

$('#mobile-navigation ul li').each(function(){
   $(this).find('a').each(function(){

       var getLink = $(this).attr('href');
       $(this).parent('li').attr('data-class',getLink);

   });
});
}
</script>

And in the custom CSS I have the following (first line is for removing the ITA page from the top navigation on desktop and the other lines are the one you suggested for making it work also on mobile):


.collection-53219842e4b0f7c737c360dc #headerNav #mainNavWrapper nav>:nth-child(2) {display: none;}
.collection-53219842e4b0f7c737c360dc
{
   #mobileNavWrapper li {

       &[data-class="ITA"],
       {display:none!important;}
   }
}

I have used #mobileNavWrapper because I have read it in the source code for Bedford template but probably there is something missing like you pointed out in my code for desktop. Any suggestions?

Thanks a lot again!

Share this post


Link to post
  • 0

My website is www.ivomartini.com

As you can see in the desktop version there is no "ITA" link in the top navigation but in the menu on mobile it still appears..

Thank you for your time

Share this post


Link to post
  • 0

I finally solved the issue.

So in Bedford template if you want to hide pages in the navbar you just have to add the following lines of code in Custom CSS for each page you want to hide:


.collection-xxxxxxxxxxxxxx #headerNav #mainNavWrapper nav>:nth-child(n) {display: none;}
.collection-xxxxxxxxxxxxxx #sidecarNav #mobileNavWrapper nav>:nth-child(n) {display: none;}

That's it! I hope this one can help.

Thanks @crucco for helping me out and @Penia and @rwilson for this tutorial!

Share this post


Link to post
  • 0

Hi you guys,

I hope you can help me out. Some basics: I am primarily a designer and not a coder, although I know some basic HTML and can read (and understand a little) CSS. I read through all the forum posts here and also watched the Multi Lang Tutorial on Youtube (previously mentioned in this thread).

I use the ISHIMOTO template: https://chiaradina-cerweny.squarespace.com

So my question:I have created my actual homepage with the language selection in the footer. It´s only type with no link behind it (where to link it to anyway) - just that you know.So I suppose the code for when the user clicks a language option needs to go into the SETTINGS>CODE INJECTION>FOOTER box so it can be called upon from every page one is on.

In the main-menu I have FOLDERS (in english) with a certain number of pages (english) in each of these. For the second language option (german) I have made FOLDERS again with the translated copies of the original (english) pages. I have put the german versions (FOLDERS and PAGES) for now in the NOT LINKED area, but from what I get it does not matter where they are placed for now anyway.

I have taken notes on ALL the collection ID´s (be it folder OR pages) of the english and german versions, so I have these handy. I also "understand" the basic code given here in this thread:

The code that we will need is:

.collection-52249736e4b022f2da85d4d3 #topNav nav ul>:nth-child(n) {display: none;}What you should change in that code:

collection-.... > write your own's 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.

that needs to go into the Custom CSS on every page as described in the thread above! (I do not understand where the "important" needs to go)

BUT: what code do I need to put in the footer (presumably) that will get the information which language option is actually chosen and will toggle the visibility of the full folder?May I also kindly ask in case someone has done this before and knows all this from the top of his or her head to give me code that also will work for (include) the mobile versions?

I am sorry if I come across as extremely dumb. I am trying my best here with the information in this forum and also with what I have found on YouTube, but I am really stuck in my apprehension due to that I am not a programmer. As I am a one woman company on a minimal budget and I feel this question may also help other freshlings like me to understand the practical application of where to put what exactly so it works in the end and does not mess up my whole layout.

I will be eternally grateful if you can help me out… please :)A huge Thank you in advance!Chiaradina

Share this post


Link to post
  • 0

Hello,

I've been through this post and tried many of the options (main-nav, topnav,...) but unfortunately it did not work with my website (www.lepetitmontessori.com). I'm using Beatrice's template. Any one has an idea of what could go wrong ? Is it linked to the template I'm using ? At the moment I'm only trying to hide one page of the website which is all in French. Once I manage to have this work I will add the English pages and hide English pages when relevant.

Any help would be greatly appreciated.

Deb

Share this post


Link to post
  • 0

Hello Deb,have you seen this suggestion by the Squarespace staff ?
http://multilingual-help.squarespace.com/how-to-create

Here's what the french section looks like.
http://multilingual-help.squarespace.com/a-propos

This workaround works only on Dovetail, Devlin, or Adirondack templates
because of their unique way to deal with folders.

THANK YOU FOR BEING SQUARESPACE sss*

Edited by sssuperguy

"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

I'm using the Aviator theme and it doesn't seem to be using the typical ways of hiding... or I'm just missing something. Can someone help me figure out what to type? Also, it doesn't seem to be using the "data-class" tag...

Here I've copied the source from the theme:


<nav id="main-navigation" data-content-field="navigation-mainNav">
   <ul class="cf">
       <li class>
           <a href="/lifeed/">Life Education</a></li>

Can someone help me figure out what I'm missing here? Thanks for your help!

Share this post


Link to post
  • 0

@chiaradina

to your 1st question: "important" is not needed here. If you want to use it, then {display:none!important}

you write: "that needs to go into the Custom CSS on every page".Actually it needs to go into the Custom CSS (which will be read by every page) FOR every page you want to hide.

To be clear: You have to list every page on which something is hidden, attributing to it everything that is hidden on it.

Check this http://www.sonjamosick.de/site.css towards the bottom you will see a long list. This hides 2 languages.

to your 2nd question: set a link to the page you want to appear.

Since you use many languages, it might be an idea to make a home page where the visitor chooses the language to enter the site.

Please forgive me, but do not use flags for languages. That is malpractice. Flags are for nations. Also, the language in Austria is German not Austrian. Few South-Americans identify with Spain. What does the US flag stand for? ;)

Edited by crucco

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