Hiding Nav Items on Mobile

Site URL: https://lyceumeducation.squarespace.com/

https://lyceumeducation.squarespace.com/

password: lyceum

Hi Guys,

I have hidden nav items on desktop and attempted to do the same in mobile. The mobile nav is still showing the nav items though. I have two main pages with their own nav items. This is my code I injected into the header of the page School Partners:

<style>

  /* desktop */
  
  .header-nav-item:nth-of-type( 6 ), /* admissions */
  .header-nav-item:nth-of-type( 7 ), /* applications */
  .header-nav-item:nth-of-type( 8 ), /* universities */
  .header-nav-item:nth-of-type( 9 ), /* learning */
  .header-nav-item:nth-of-type( 10 ), /* our_tutors */
  
  /* mobile */
  
  .header-menu-nav-item:nth-of-type( 6 ), /* admissions */
  .header-menu-nav-item:nth-of-type( 7 ) /* applications */
  .header-menu-nav-item:nth-of-type( 8 ) /* universities */
  .header-menu-nav-item:nth-of-type( 9 ) /* learning */
  .header-menu-nav-item:nth-of-type( 10 ) /* our_tutors */
  
    {
    
    display: none;
    
    }
    
  </style>

and the same for the Families page:

<style>

  /* desktop */
  
  .header-nav-item:nth-of-type( 2 ), /* school_partners */
  .header-nav-item:nth-of-type( 3 ), /* how_it_works */
  .header-nav-item:nth-of-type( 4 ), /* benefits */
  
  /* mobile */
  
  .header-menu-nav-item:nth-of-type( 2 ), /* school_partners */
  .header-menu-nav-item:nth-of-type( 3 ) /* how_it_works */
  .header-menu-nav-item:nth-of-type( 4 ) /* benefits */
  
    {
    
    display: none;
    
    }
    
  </style>

If anyone can see the mistake I have made, I presume with my code since its working for desktop and not mobile on both, that would be a great help!

Hi,

Which items you want to hide on this page?

https://lyceumeducation.squarespace.com/partners