Error on Navigation Menu, Folder items not appearing

Site URL: https://lychee-carnation-4cdg.squarespace.com/

Hi!

I'm trying to create a multilingual website and everything is working except for the items on folder that are not showing up on mobile.

I followed this tutorial: https://www.creationsbyfaria.com/blog/multilingual-site-squarespace

Basically I've created every page I need for each language, and I'm using custom CSS on each page to hide the navigation items I don't want to show on a specific language.

Everything is working perfectly fine on desktop, but on mobile, on the second and third language, the items on the folder I have are not showing up.

I've attached a print of what my Pages look like. The first language is Portuguese, the second English, and the third French.

The Products folder is the one I'm having trouble with on Mobile. Basically when I click the folder the options are not visible, but this only on the second and third language. On Portuguese they show up fine.

This is the code I'm using on the English Pages to hide the Portuguese and the French ones:

<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}
#header .header-nav-item:nth-child(7) {display:none}
#header .header-nav-item:nth-child(15) {display:none}
#header .header-nav-item:nth-child(16) {display:none}
#header .header-nav-item:nth-child(17) {display:none}
#header .header-nav-item:nth-child(18) {display:none}
#header .header-nav-item:nth-child(19) {display:none}
#header .header-nav-item:nth-child(20) {display:none}
#header .header-nav-item:nth-child(21) {display:none}

@media screen and (max-width:767px){#header .header-menu-nav-item:nth-child(1) {display:none}}
@media screen and (max-width:767px){#header .header-menu-nav-item:nth-child(2) {display:none}}
@media screen and (max-width:767px){#header .header-menu-nav-item:nth-child(3) {display:none}}
@media screen and (max-width:767px){#header .header-menu-nav-item:nth-child(4) {display:none}}
@media screen and (max-width:767px){#header .header-menu-nav-item:nth-child(5) {display:none}}
@media screen and (max-width:767px){#header .header-menu-nav-item:nth-child(6) {display:none}}
@media screen and (max-width:767px){#header .header-menu-nav-item:nth-child(7) {display:none}}
@media screen and (max-width:767px){#header .header-menu-nav-item:nth-child(15) {display:none}}
@media screen and (max-width:767px){#header .header-menu-nav-item:nth-child(16) {display:none}}
@media screen and (max-width:767px){#header .header-menu-nav-item:nth-child(17) {display:none}}
@media screen and (max-width:767px){#header .header-menu-nav-item:nth-child(18) {display:none}}
@media screen and (max-width:767px){#header .header-menu-nav-item:nth-child(19) {display:none}}
@media screen and (max-width:767px){#header .header-menu-nav-item:nth-child(20) {display:none}}
@media screen and (max-width:767px){#header .header-menu-nav-item:nth-child(21) {display:none}}

What can I do to solve the problem of the folder items not showing on mobile? 

Thanks a lot!

Hi. What is site access password?

Hi! I sent you a private message with the password. Thank you!

Hi. You can consider this guide. I think it is easier.

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

Thanks for your reply.

Do you know why the items on the naviagtion menu on folders are not showing up?

17 hours ago, DoraLadeiro said:

Thanks for your reply.

Do you know why the items on the naviagtion menu on folders are not showing up?

Can you send password again? Thank you.

Sure! I sent you a private message with it.
Thanks for the help!

Hi.

I see folder items here? https://www.loom.com/share/9dd6ba7b46a64ae687ee21425c42744d

Hi!

The problem is on Mobile, with the 2 other languages, the english and the french.

On desktop is working fine, the problem is only with mobile.

I attached a video on this post where I showed what happens.

Just had a week off in village. Do you still need help?

Quote

On 6/28/2021 at 12:54 AM, tuanphan said:

Just had a week off in village. Do you still need help?

Hi, this is the exact issue I am facing. I just emailed you via your site, could you please help? 

21 hours ago, Elephant112233 said:

 

Hi,

I will check soon

Hi @tuanphan,

I just emailed you regarding the same issue as this one before i found this thread. Maybe post solution in here for others if you know what's wrong.

Best regards

9 hours ago, nbeck said:

Hi @tuanphan,

I just emailed you regarding the same issue as this one before i found this thread. Maybe post solution in here for others if you know what's wrong.

Best regards

Hi,

I think i answered your email a few hours ago. You can check it again.

Hello, I am experiencing exactly the same issue on my site. Have you found any solutions to this? Thank you so much.

5 minutes ago, stephanmader said:

Hello, I am experiencing exactly the same issue on my site. Have you found any solutions to this? Thank you so much.

Can you share site url?

2 minutes ago, tuanphan said:

Can you share site url?

www.stephanmader.at

the problem is on the English page in the folder music (on German page all works well)

17 hours ago, stephanmader said:

www.stephanmader.at

the problem is on the English page in the folder music (on German page all works well)

Add to English Pages Header

<style>
  [data-folder="/music"] div {
    display: block !important;
}
</style>

5 hours ago, tuanphan said:

<style>
  [data-folder="/music"] div {
    display: block !important;
}
</style>

you are a genius. thank you so much!!!

Hello, 

I've already messaged you, and deleted my secondary language code by the time you reviewed it. 

I'm having the same problem as everyone else here. On desktop the folder works perfectly. In mobile they're missing. Please help me fix this!!!! You're the best!

anastasiawellnesscoach.com

password: Bali123

On 1/21/2022 at 4:21 PM, GoofyBigKid said:

Hello, 

I've already messaged you, and deleted my secondary language code by the time you reviewed it. 

I'm having the same problem as everyone else here. On desktop the folder works perfectly. In mobile they're missing. Please help me fix this!!!! You're the best!

anastasiawellnesscoach.com

password: Bali123

Replace these code

#header .header-menu-nav-item:nth-child(3) {
    display: none;
}

with

nav.header-menu-nav-list>[data-folder].header-menu-nav-folder--active>div .header-menu-nav-item:nth-child(3) {
    display: none;
}

Do similar for other items

I was wondering if anyone can help me. I'm having the same issue, I have a multilingual page (English and French). The folder in EN (desktop and mobile) looks great. In FR the folder shows up perfectly, but does not show up on mobile. 

The code that I'm using is the following for French mobile:

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

Would someone be able to assist me with this problem?

Site URL: https://www.autismbehaviorsolution.com/

Password: Coffee55

Thank you

2 hours ago, Mo1234 said:

I was wondering if anyone can help me. I'm having the same issue, I have a multilingual page (English and French). The folder in EN (desktop and mobile) looks great. In FR the folder shows up perfectly, but does not show up on mobile. 

The code that I'm using is the following for French mobile:

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

 

Would someone be able to assist me with this problem?

Site URL: https://www.autismbehaviorsolution.com/

Password: Coffee55

Thank you

Remove code you posted above & use this code

<style>
  nav.header-nav-list>div:nth-child(1), nav.header-nav-list>div:nth-child(2), nav.header-nav-list>div:nth-child(3), nav.header-nav-list>div:nth-child(4), nav.header-nav-list>div:nth-child(5) {
    display: none;
}
/* hide items on mobile */
[data-folder="root"]>div:first-child>div:first-child>div:nth-child(1), [data-folder="root"]>div:first-child>div:first-child>div:nth-child(2), [data-folder="root"]>div:first-child>div:first-child>div:nth-child(3), [data-folder="root"]>div:first-child>div:first-child>div:nth-child(4), [data-folder="root"]>div:first-child>div:first-child>div:nth-child(5) {
    display: none;
}
</style>

If code doesn't work, you can setup an access password we can check easier, your site is private now

@tuanphan Thank you for your assistance. Unfortunately, the code didnt work. I have added the access password . The password is Coffee55. 

Thanks 🙂

12 hours ago, Mo1234 said:

@tuanphan Thank you for your assistance. Unfortunately, the code didnt work. I have added the access password . The password is Coffee55. 

Thanks 🙂

Thank you. Which page you want to hide items 1, 2, 3, 4, 5? We can check easier

and which page you added code I sent?