Jump to content

Custom coding for pages wont work on mobile

Go to solution Solved by tuanphan,

Recommended Posts

I am no coding expert and am not knowledgeable on this subject at all, which is why I need help. I've had issues with the whole non-friendly approach to multi-lingual websites here on Squarespace (weglot is the worst, sorry), but I finally managed to figure out how to have French and English on the same URL via coding. It works wonders: code on English pages hides the French ones and vice versa. However, I just realized that this code does NOT work on mobile view, which just makes the website look unprofessional now. Is there a way I can fix this?

363420226_1399394590664350_6756630666069163219_n.jpg

Link to comment

Can you share your website URL and the code your are using for showing/hiding navigation links?

The mobile navigation has different selectors so typically needs more code of that's your approach.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
Just now, Ziggy said:

Can you share your website URL and the code your are using for showing/hiding navigation links?

The mobile navigation has different selectors so typically needs more code of that's your approach.

Sorry, I thought it shared my url, it's www.efslogistics.ca and here's the code (on French pages but it's basically the same on English pages but with different numbers) :

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

 

Link to comment
  • Solution

With mobile use this

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

 

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
4 hours ago, tuanphan said:

With mobile use this

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

 

It worked!! Thank you so so much!!

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.