dropdown Site navigation dropdown menu issue (mobile view)

Hi all whom read this! Currently am running into this issue for a long time regarding my dropdown menus:

My website www.capturedwithpassion.com exists out of an English and Dutch version (using duplicate pages), where on desktop everything works all fine. However, on mobile/tablet view it does not show the pages in the drop down menu at the Dutch version (as shown in the video recording).

It might be a custom code issue, as it's only the dropdown menu part on mobile view in particular... my brain can't see where the issue is though, hope someone can help out! One of the pages custom code that won't show:

<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
  }
</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
      }
</style>

you're amazing, thank you so much!!