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

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!

try .primary-nav instead...

(screenshot of the Takk markup) http://cl.ly/VKV4

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}

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!

GOOD NEWS!

The "data-class-method" as described

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!

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!

you have to check the source code of your page(s). In TAKK it seems to be .nav instead of #topNav.

you have to check the source code of your page(s). In ADIRONDACK it seems to be #main-navigation instead of #topNav.

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;}

After trial and error, I found this to work for hiding menu items on mobile devices and on on PCs. You will need to add these 2 lines of code for every menu item to be hiden on each page (X=menu item number):

.collection-YOURCOLLECTIONID #topNav nav ul>:nth-child(X) {display: none;}

.collection-YOURCOLLECTIONID #mobileNav nav ul>:nth-child(X) {display: none;}

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!

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 …

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;}

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!

I took a look at the template, but I have no clue.Maybe it helps when I look at your site. What's the url?

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

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!

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

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

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*

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!

@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? ;)

try #collection-51a9bcb4e4b02509ec24f0bd #topNav nav ul > nth-child(odd) {display:none;}

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;}