Jump to content

Bilingual mobile menu

Recommended Posts

Hi

Can anyone help please? We would like to achieve a bilinugual Mobile Menu as has already been done for us on the Mobile Sub-menus

Here's the existing code:

/*Site Nav Links - linebreak for Welsh language*/
.header-nav-item a{
  display: inline;
}
/*Home*/
.header-nav-item:nth-of-type(1) a:after{
  content:"\a Home";
  white-space: pre !important;
}
/*Info*/
.header-nav-item:nth-of-type(2) .header-nav-folder-title:after{
  content:"\a About Us";
  white-space: pre !important;
}
/*Cwricwlwm*/
.header-nav-item:nth-of-type(3) .header-nav-folder-title:after{
  content:"\a Curriculum";
  white-space: pre !important;
}
/*Links*/
.header-nav-item:nth-of-type(4) .header-nav-folder-title:after{
  content:"\a Key Information";
  white-space: pre !important;
}
/*Contact Us*/
.header-nav-item:nth-of-type(5) .header-nav-folder-title:after{
  content:"\a Links";
  white-space: pre !important;
}

section[data-section-id="6319fdebf0bccb66171c0482"] .image-block img{
  transition: .2s ease;
}
section[data-section-id="6319fdebf0bccb66171c0482"] .image-block:hover img{
  transition: .2s ease;
  transform: scale(1.1);
}

Thank you 

Link to comment

Can you share your website URL?

I'm not 100% sure what you need help with, but I tend to suggest this guide for multi-lingual websites, it's much easier to manage than targeting by menu position as you currently have in your code:

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

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

I can see what you're doing now.

You'll need to additionally use .header-menu-nav-item to target the mobile menu navigation, in this vein: 

.header-nav-item:nth-of-type(1) a:after, .header-menu-nav-item:nth-of-type(1) a:after{
  content:"\a Home";
  white-space: pre !important;
}

 

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

Thank you

If I'm doing it right.. this fixes the mobile sub menu perfectly, but breaks the main menu by adding "About Us" after every sub menu entry. I've left the edit live so that you can see.

/*Info*/
.header-nav-item:nth-of-type(2) a:after, .header-menu-nav-item:nth-of-type(2) a:after{
  content:"\a About Us";
  white-space: pre !important;
}

 

edit..

It actually breaks other 2nd level mobile menu titles too

Edited by MarkSimpson
Further info
Link to comment

Here's what I've done - which is fixing the mobile menu but breaking the main site menu:

/*Info*/
.header-nav-item:nth-of-type(2) a:after, .header-menu-nav-item:nth-of-type(2) a:after{
  content:"\a About Us";
  white-space: pre !important;
}

 

Edited by MarkSimpson
Link to comment

Try this to exclude the folder

/*Info*/
*:not(.header-nav-item .header-nav-item--folder) {
  .header-nav-item:nth-of-type(2) a:after, .header-menu-nav-item:nth-of-type(2) a:after{
    content:"\a About Us";
    white-space: pre !important;
  }
}

 

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

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.