Jump to content

Dual language website, trying to hide the English menu on the Spanish site but it keeps hiding the second navigation bar I coded in, what should I do?

Recommended Posts

I am creating a dual language (English and Spanish) website on Squarespace featuring a second navigation bar at the top for toggling between the two sites.

I was able to successfully create the English page where there's a second nav bar at the top to switch between the English and Spanish websites and hide the Spanish pages.

The main issue I'm encountering is that when I use the same code but switch out the nth-child selector to hide the English pages for the Spanish side, it also hides the copy of the second navbar. What steps should I take in the Spanish coding to prevent it from removing the copy of the second navbar?

Here's the full menu bar with the nth-child coding: 

English Pages 

 

Home

Nth-child 1

About Us

Nth-child 2

Our Families

Nth-child 3

TBCK Syndrome 

Nth-child 4

Get Involved + Events

Nth-child 5

Research + Advocacy 

Nth-child 6

Community Support

Nth-child 7

Contact 

Nth-child 8


 

Spanish Pages 

 

Home Inicio 

Nth-child 9

About Us Sobre Nosotros

Nth-child 10

Our families Nuestra Familias

Nth-child 11

TBCK Syndrome Sindrome TBCK

Nth-child 12

Get Involved + Events Involucrate y Eventos

Nth-child 13

Research + Advocacy Investigacion y Abogacia

Nth-child 14

Community Support Apoyo Comunitario

Nth-child 15

Contact Contactanos

Nth-child 16

 

Code I used for the Spanish Menu Bar 

<!-- Spanish Menu Bar, hides English Menu Bar -->
<style>
/* desktop */
#header .header-nav-item:nth-child(1) {display:none}
#header .header-nav-item:nth-child(2) {display:none}
#header .header-nav-item:nth-child(3) {display:none}
#header .header-nav-item:nth-child(4) {display:none}
#header .header-nav-item:nth-child(5) {display:none}
#header .header-nav-item:nth-child(6) {display:none} 
#header .header-nav-item:nth-child(7) {display:none}
#header .header-nav-item:nth-child(8) {display:none}

/* mobile */
@media screen and (max-width:1511px)
{#header .header-menu-nav-item:nth-child(1) {display:none}}
@media screen and (max-width:1511px){#header .header-menu-nav-item:nth-child(2) {display:none}}
@media screen and (max-width:1511px){#header .header-menu-nav-item:nth-child(3) {display:none}}
@media screen and (max-width:1511px){#header .header-menu-nav-item:nth-child(4) {display:none}}
@media screen and (max-width:1511px){#header .header-menu-nav-item:nth-child(5) {display:none}}
@media screen and (max-width:1511px){#header .header-menu-nav-item:nth-child(6) {display:none}}
@media screen and (max-width:1511px){#header .header-menu-nav-item:nth-child(7) {display:none}}
@media screen and (max-width:1511px){#header .header-menu-nav-item:nth-child(8) {display:none}}

</style>

<!--Secondary Menu Bar for English / Spanish option -->
</style>
<div data-wm-plugin="subnav"
 	data-nav-setup="custom"
 	data-position="top"
 	mobile-position="bottom"
 	data-sticky="false">
  <a href="/home">English</a>
  <a href="/es/home">Spanish</a>
</div>

 

 

Screenshot 2024-03-12 at 5.11.07 PM.png

Screenshot 2024-03-12 at 5.11.03 PM.png

Link to comment
  • Replies 2
  • Views 918
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

This is tricky to solve because both navigations use the same classes. 

Honestly I prefer this method as it doesn't involve hiding individual menu items based on position and gives you a switcher so you don't need the secondary navigation plugin:

https://www.bradgood.net/articles/multi-language-content-on-any-squarespace-template

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

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