Jump to content

Error with Multilingual Folder Navigation Items on Mobile

Recommended Posts

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!

 

Pages.PNG

Link to comment
  • 3 months later...
  • 1 month later...
  • 2 months later...
  • 1 month later...

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

Link to comment
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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!

Link to comment
  • 2 months later...
  • 5 months later...
  • 3 months later...
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?

 

Link to comment
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.