Pages/Folder items not showing up on mobile navigation

Hi all,  I am having issues with my mobile navigation.

I have a drop down menu, and on mobile - only some of the items from the drop down show up.
My website is in english and german, on the english mobile navigation 3 out of 4 pages that are placed inside a folder show up, on the german one only 1 out of 4 is visible.
On the english pages, the last folder item is missing and on the german pages only the last item in the folder is showing.

On desktop it works perfectly.

I have not tinkered with the code for said drop down apart from changing its background, text colour and text alignment.

Does anyone know how to solve this and have all folder items showing up as they should also on mobile?

My website is live here https://www.nathmakesthings.com/home-eng

Did you ever fully solve this? I have english and spanish pages and I just realized I have the same issue out of nowhere

1 hour ago, PerfectCaptureBooth said:

Did you ever fully solve this? I have english and spanish pages and I just realized I have the same issue out of nowhere

What is your site url? We can check problem easier

Yes, it's perfectcapturebooth.com

For English pages, it seems the "Home" and "About Us" are missing on the mobile version menu

And on the Spanish pages, it seems "Reserva" and a few other pages seem to go missing.

This is the code that Im using : 

 

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

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

12 hours ago, PerfectCaptureBooth said:

Yes, it's perfectcapturebooth.com

For English pages, it seems the "Home" and "About Us" are missing on the mobile version menu

And on the Spanish pages, it seems "Reserva" and a few other pages seem to go missing.

This is the code that Im using : 

 

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

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

 

You can use this new approach

Hey man sorry for barely getting to this!
So I tried this code, for the desktop it works, but for mobile nothing is happening at all. Not sure if I'm inputting it wrong or something.

This is how I inserted it:

<style>
    /* hide items on desktop */
    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(2), [data-folder="root"]>div:first-child>div:nth-child(3), {
        display: none;
    }
    </style>

Update : 
So I'm trying this code instead, where I changed the "hide items on mobile " coding completely. And so far, this seems to work correctly.

<style>
    /* hide items on desktop */
    nav.header-nav-list>div:nth-child(2), nav.header-nav-list>div:nth-child(3) {
        display: none;
    }
    /* hide items on mobile */
 .header-menu-nav-list [data-folder="root"] .header-menu-nav-folder-content > div:nth-child(2), .header-menu-nav-list [data-folder="root"] .header-menu-nav-folder-content > div:nth-child(3)
  {
  display: none !important;
}
    </style>

On 8/14/2023 at 8:57 AM, PerfectCaptureBooth said:

Update : 
So I'm trying this code instead, where I changed the "hide items on mobile " coding completely. And so far, this seems to work correctly.

<style>
    /* hide items on desktop */
    nav.header-nav-list>div:nth-child(2), nav.header-nav-list>div:nth-child(3) {
        display: none;
    }
    /* hide items on mobile */
 .header-menu-nav-list [data-folder="root"] .header-menu-nav-folder-content > div:nth-child(2), .header-menu-nav-list [data-folder="root"] .header-menu-nav-folder-content > div:nth-child(3)
  {
  display: none !important;
}
    </style>

Did you solve all or still need help?

Solved it all! Thanks!

On 8/15/2023 at 3:22 AM, tuanphan said:

Did you solve all or still need help?

Updating, this code is no longer working for mobile, any solution?

 /* hide items on mobile */
 .header-menu-nav-list [data-folder="root"] .header-menu-nav-folder-content > div:nth-child(2), .header-menu-nav-list [data-folder="root"] .header-menu-nav-folder-content > div:nth-child(3)
  {
  display: none !important;
}
    </style>

On 10/11/2023 at 11:17 AM, PerfectCaptureBooth said:

Updating, this code is no longer working for mobile, any solution?

 /* hide items on mobile */
 .header-menu-nav-list [data-folder="root"] .header-menu-nav-folder-content > div:nth-child(2), .header-menu-nav-list [data-folder="root"] .header-menu-nav-folder-content > div:nth-child(3)
  {
  display: none !important;
}
    </style>

Change it to this

/* hide items on mobile */
[data-folder="root"]>div:first-child>div:first-child>div:nth-child(2), [data-folder="root"]>div:first-child>div:first-child>div:nth-child(3)
  {
  display: none !important;
}
    </style>

Fixed thank you!