Bilingual mobile menu

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 

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

Apologies I thought the link I had to provide would be visible...

Ysgol Bro Caereinion

We didn't want a split bi-lingual website as we're trying to make the Welsh language immersive and everyone preferred this delivery with both languages on the same page. 🙂

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;
}

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

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;
}

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;
  }
}

Thanks again - that didn't seem to fix it? 😞

(The edit is live)

bump

Do you still need help?