Error with Multilingual Folder Navigation Items on Mobile

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!

Hello, did you find a solution? I am experiencing the EXACT same problem!

On 8/16/2021 at 3:15 PM, Elephant112233 said:

Hello, did you find a solution? I am experiencing the EXACT same problem!

Can you share link to your site? We can check easier

Hello!! I have the same the same problem , could someone share the solution please?

Best! 

On 10/5/2021 at 10:38 PM, PaulinaG said:

Hello!! I have the same the same problem , could someone share the solution please?

Best! 

Can you share site url?

I have the exact same problem.

anastasiawellnesscoach.com

On 12/19/2021 at 2:58 PM, GoofyBigKid said:

I have the exact same problem.

anastasiawellnesscoach.com

Mobile looks fine to me

It's me again. I really appreciate your help. 

Yes that's my site and it looks correct. However if you click the "Coaching" button. It only shows 1 link when it shows 3 links on the desktop site. 

I think there's a different ccs code for folders than for individual pages. 

anastasiawellnesscoach.com

11 hours ago, GoofyBigKid said:

It's me again. I really appreciate your help. 

Yes that's my site and it looks correct. However if you click the "Coaching" button. It only shows 1 link when it shows 3 links on the desktop site. 

I think there's a different ccs code for folders than for individual pages. 

anastasiawellnesscoach.com

You used some code like this

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

edit it to

[data-folder="root"]>div>.header-menu-nav-item:nth-child(2) {
    display: none;
}

I sincerely appreciate your help on this. But I'm still not there. 

I guess I'm fundamentally confused on the code. I'm having a problem having my page links appear only in the mobile version. And you're code is supposed to help me hide folders - but I need to show the contents in the folder. 

I've tried playing with different variations of this and I'm so confused. I sincerely appreciate your help. 

Here's the exact page link that I've been trying to figure out. You can see the code that I've tried to play with. https://anastasiawellnesscoach.com/en/home

You're the best for your time and help!

I am experiencing a problem with this code too!
www.cheekycreek.com

All my navigation buttons are still showing!

Have you ever solved this?

On 9/28/2022 at 7:34 PM, D4D0M3N said:

Have you ever solved this?

If you share link to page where you have problem, we can take a look

Thank you, I solved this one. For some reason, for me was the spacing before the (.

On 10/3/2022 at 5:50 PM, D4D0M3N said:

Thank you, I solved this one. For some reason, for me was the spacing before the (.

I have the exact same problem, working on the first language but not the other two... you changed something on the code to fix it?

On 1/11/2023 at 11:46 PM, oliweb said:

I have the exact same problem, working on the first language but not the other two... you changed something on the code to fix it?

 

What is your site url? We can take a look