Custom coding for pages wont work on mobile

Hi all, this is my second post about this issue. It had initially been resolved but the code suddenly doesn't work anymore. Here is my original post:

Quote

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?

 

The code I use for the desktop website (www.efslogistics.ca) that won't work on mobile is this:

Quote

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

A user on here had originally answered to add this code to my code:

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

Which originally worked wonders. Now, all of a sudden, it won't work anymore and acts differently on the English and French pages. The French pages won't display ANY menu items, it's just blank, so you can't navigate on our website on mobile while the English pages display the full menu in both languages (like the picture shown above.

If anyone has any insight on what went wrong, please help! Thank you

13 minutes ago, Krissybs said:

#header .header-nav-item:nth-child(1){
    display:none
  }

This code only targets the desktop navigation, not mobile. For mobile you need this class:

.header-menu-nav-item a

Try this:

<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-menu-nav-item a:nth-child(1) {
    display:none
  }
    .header-menu-nav-item a:nth-child(2) {
    display:none
  }
    .header-menu-nav-item a:nth-child(3) {
    display:none
  }
    .header-menu-nav-item a:nth-child(4) {
    display:none
  }
  .header-menu-nav-item a:nth-child(5) {
    display:none
  }
  </style>

(there was a missing bracket at the end that I've added too.)

32 minutes ago, Ziggy said:

This code only targets the desktop navigation, not mobile. For mobile you need this class:

.header-menu-nav-item a

Try this:

<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-menu-nav-item a:nth-child(1) {
    display:none
  }
    .header-menu-nav-item a:nth-child(2) {
    display:none
  }
    .header-menu-nav-item a:nth-child(3) {
    display:none
  }
    .header-menu-nav-item a:nth-child(4) {
    display:none
  }
  .header-menu-nav-item a:nth-child(5) {
    display:none
  }
  </style>

(there was a missing bracket at the end that I've added too.)

Yeah this did not work either, I'm so confused. It ended up blanking out the main navigation menu in French as well (see pics attached). However it doesn't do it with the English pages, it just displays the whole menu (nth-child 6, 7, 8, 9, 10 is the code to hide the french pages on english).