Jump to content

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

Recommended Posts

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

Link to comment
  • 1 month later...
  • Replies 87
  • Views 45.9k
  • Created
  • Last Reply

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.

Link to comment

@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!

Link to comment
  • 3 weeks later...

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

Link to comment
  • 2 months later...

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.

Link to comment
  • 1 month later...

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?

Link to comment
  • 2 months later...

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 !

Link to comment
  • 1 year later...

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

Link to comment

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

Link to comment
  • 10 months later...

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!

Link to comment
  • 4 months later...
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 8 months later...

Archived

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.