Issue about hierarchy of pages and pages in a folder of main navigation menu (mobile), code

Hi. 

I want to hide 'Speakers' and 'Schedule' page from navigation bar,

So I used this code.

<style>
	#header .header-nav-item:nth-child(2){
      display:none
  }
    #header .header-nav-item:nth-child(4){
      display:none
  }
  
</style>


<style>
    @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(4){
        display:none
      }
    
</style>

It was successful on the web, but when it comes to mobile, it makes 'page 1' in the folder dissappear.

I guess it recognizes 'page2' and 'Speakers' as

.header-menu-nav-item:nth-child(2)

at the same time. 

maybe it's because 'page1' is in the folder.

Can you guys help me making the hierarchy?

You can see my approach to know how to hide these items on desktop/mobile.

Just an example

Next, you can add this code to Page Header  to hide Items 3, 4, 5

<style>
/* hide items on desktop */
nav.header-nav-list>div:nth-child(3), nav.header-nav-list>div:nth-child(4), nav.header-nav-list>div:nth-child(5) {
    display: none;
}
/* hide items on mobile */
[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;
}
</style>

Next, add this code to Page Header  to hide Items 1, 2, 3

<style>
/* hide items on desktop */
nav.header-nav-list>div:nth-child(1), nav.header-nav-list>div:nth-child(2), nav.header-nav-list>div:nth-child(3) {
    display: none;
}
/* 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) {
    display: none;
}
</style>