TAMSHOTS

Hi Tuan, I need your help 🙂

I have been using some code to create duplicated pages without showing the opposite language pages, depending on which language my visitors prefer. 

It worked perfectly fine, however on mobile view I have been facing an issue, where the drop down menu at "details" draws a complete blank. It is not due to the link color that is by accident on white, no. And I cannot find any issue in the code I am using (this specific one is for the Dutch homepage) as there is no issue with accessing the English drop-down menu version: and the code is just the opposite of both:

There are no issues when accessing the drop down menu from a desktop. Hope you're able to help figure out what is wrong. I provided you with screenshots from my phone and also an email from a SQ expert who emailed me back. Thank you in advance!

<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 .header-nav-item:nth-child(6){
    display:none
  }
  #header .header-nav-item:nth-child(7){
    display:none
  }
  #header .header-nav-item:nth-child(8){
    display:none
  }
</style>

<style>
      @media screen and (max-width:1511px){
      #header .header-menu-nav-item:nth-child(1){
        display:none
      }
      @media screen and (max-width:1511px){
      #header .header-menu-nav-item:nth-child(2){
        display:none
      }
      @media screen and (max-width:1511px){
      #header .header-menu-nav-item:nth-child(3){
        display:none
      }
      @media screen and (max-width:1511px){
      #header .header-menu-nav-item:nth-child(4){
        display:none
      }
      @media screen and (max-width:1511px){
      #header .header-menu-nav-item:nth-child(5){
        display:none
      }
      @media screen and (max-width:1511px){
      #header .header-menu-nav-item:nth-child(6){
        display:none
      }
      @media screen and (max-width:1511px){
      #header .header-menu-nav-item:nth-child(7){
        display:none
      }
      @media screen and (max-width:1511px){
      #header .header-menu-nav-item:nth-child(8){
        display:none
      }
</style>