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?

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: 

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>

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

Thank you Ziggy! This worked for me 🙂