Custom coding for pages wont work on mobile

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?

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.

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>

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