7.1 Change mobile navigation in 7.1

Adding the following CSS should put you in a good spot:

/* Mobile nav styles */
@media (max-width: 799px){

  /* Make the sub menu and container that contains the icons spaced apart into a column */
  .header--menu-open .header-menu .header-menu-nav-list {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  /* Override default properties to bring the sub menu into view */
  .header-menu-nav-folder {
    position: relative; 
    transform: translateX(0);
    min-height: auto;
  }
  
  /* Reduce the font size and adjust the space between the lines */
  .header-menu-nav-folder a {
    font-size: 2.1rem;
    line-height: 1;
  }
  
  /* 
    Override the default `position` and `min-height` properties of the main menu container
    that also contains the icons and place it below the sub menu using the `order` property.
   */
  .header-menu-nav-folder[data-folder="root"] {
    position: relative;
    min-height: auto;
    order: 2;
  }
  
  /* Hide the container of the main menu */
  .header-menu-nav-folder[data-folder="root"] .header-menu-nav-folder-content {
    display: none;
  }
  
  /* Hide the back button */
  .header-menu-controls-control[data-action="back"] {
    display: none;
  }
}

See article on how to add CSS: https://support.squarespace.com/hc/en-us/articles/205815928-Adding-custom-HTML-CSS-and-JavaScript

Thank you so much @jpeter it works so well.

This is amazing! I don't really know CSS but I am trying to learn.

It appears you are calling the second menu screen first with

.header-menu-nav-folder[data-folder="root"] {
    position: relative;
    min-height: auto;
    order: 2;
  }

But then it looks like you are saying "do not display any content".

.header-menu-nav-folder[data-folder="root"] .header-menu-nav-folder-content {
    display: none;
  }

This appears to be hiding 'back' button:

.header-menu-controls-control[data-action="back"] {
    display: none;
  }

Although, I'm sorry, i don't really understand the rest.

Thank you for your help.

@beren Glad it worked for you! I updated the CSS by adding some comments to each CSS ruleset that will hopefully help you figure my logic behind the styles.

I would love to know how I can adapt this to hide the submenu and have only the top level items link out?