Multilanguage navigation dropdown menu problem - manually CSS setup. - NOT working on dropdown menu mobile view.

 

Hello,

I've been migrating my site from 7.0 www.amorylujo.com to 7.1 for a month.

This is the result:

https://amorylujo.squarespace.com/

Password: Amor

To create the multilingual site I used this code to hide the pages´links in one language or the other

@media screen and (max-width:1511px){#header .header-menu-nav-item:nth-child(1) {display:none}}

 

But I get this problem: the 2 links that are inside the "Films" folder are not displayed but only in the mobile view and only browsing in English language.

On Mobile Spanish browsing and on Desktop (English and Spanish) they are displayed correctly 

 

Here the code I copy/paste for all the English pages:

<style>

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

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

</style>

 

And here for all the Sanish pages:

<style>

#header .header-nav-item:nth-child(7) {display:none}

#header .header-nav-item:nth-child(8) {display:none}

#header .header-nav-item:nth-child(9) {display:none}

#header .header-nav-item:nth-child(10) {display:none}
  
#header .header-nav-item:nth-child(11) {display:none}
  
#header .header-nav-item:nth-child(12) {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}}

@media screen and (max-width:1511px){#header .header-menu-nav-item:nth-child(9) {display:none}}

@media screen and (max-width:1511px){#header .header-menu-nav-item:nth-child(10) {display:none}}

@media screen and (max-width:1511px){#header .header-menu-nav-item:nth-child(11) {display:none}}

@media screen and (max-width:1511px){#header .header-menu-nav-item:nth-child(12) {display:none}}

</style>

 

I figure I need to change something here:

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

 

Any help is deeply apreciated

A&L

 

 

Good morning Tuanphan,
First of all, thank you very much for your help.
The one you provided me

<style>
  div.header-nav-item:nth-child(-n+6) {
  	display: none;
  }
  [data-folder="root"]>div:first-child>div:first-child>div:nth-child(-n+6) {
  display: none;
  }
</style>

in this other topic worked perfectly.

 

I hope it's not too much to ask, if you can give us your opinion in this other problem I´m having on my site.

Your opinion is greatly valued.

A&L

 

If you agree, we can change top 2 buttons with a Code Block and second 3 buttons with a Code Block, I can give the code, they will be fine without overlap.

 

On 1/30/2024 at 11:06 AM, tuanphan said:

If you agree, we can change top 2 buttons with a Code Block and second 3 buttons with a Code Block, I can give the code, they will be fine without overlap.

 

Yes please, whatever might work I can try.
I'm doing field work until next Tuesday, that's when I can continue working on the page.
Thank you so much