Sub-menu of burger menu

Hi everyone 

I have created multilingual website by creating a folder called "ENG/DE" and I putted in there paged called "English" and "Deutsch" which is showing as a drop down menu. Then I put e css code in advanced section of each page (English and Deutsch) to hide navigation titles of opposite language. here you can see the code. 

 

  /* Hide the first 7 navigation titles on the first page */
@media screen and (max-width: 1024px) {
  #header .header-menu-nav-item:nth-child(-n+7) {
    display: none;
  }
It working very good, but I have a problem, in Deutsch page's mobile version along with first 7 navigation titles it's also hiding sub-menu pages "back ", "English" and "Deutsch" because they are first 3 pages of sub-menu.

Question: How can I customize the code to hide navigation titles from only the first page of burger menu but don't touch or don't affect in any ways the sub -menu?

Thank you so much  

Use this code instead

/* hide items on mobile */
[data-folder="root"]>div:first-child>div:nth-child(-n+7) {
    display: none;
}