Jump to content

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

Recommended Posts

  • Replies 87
  • Views 45.9k
  • Created
  • Last Reply

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}

Link to comment


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-2_xxxxx {
   #mobile-navigation li {

I hope that helps!

Link to comment
  • 2 weeks later...

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:


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!

Link to comment

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

Link to comment
  • 2 weeks later...

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

Link to comment
  • 2 weeks later...

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!

Link to comment

Hi damnivo,


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


#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 …

Link to comment

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

Link to comment

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:


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

       var getLink = $(this).attr('href');


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;}
   #mobileNavWrapper li {


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!

Link to comment

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

Link to comment

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!

Link to comment
  • 1 month later...

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

Link to comment


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.


Link to comment

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!

Link to comment


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

Link to comment


This topic is now archived and is closed to further replies.

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.