Placing mobile menu alongside header

The following CSS should work well for that. It will place the menu icon next to the site title, and then the mobile menu will open above.

@media all and (max-width: 899px) {

  .site-header {  
    display: flex;  
    flex-wrap: wrap;  
    justify-content: center;  
    align-items: center;
  }
  .menu-primary-container {  
    width: 100%;
  }
  .toggle-navigation {  
    width: auto;  
    margin: 0 36px 0 0;
  }
  .title-container {  
    margin-top: 0;
  }
}

Please copy and paste this into the Custom CSS section in the Customizer (Appearance > Customize), and it will take affect right away.

• This reply was modified 1 year, 8 months ago by Ben Sibley.

Sure, that’s doable. It’s easiest to replace the entire snippet with the edits, so please delete the prior code and replace it entirely with the following:

@media all and (max-width: 899px) {

  .site-header {  
    display: flex;  
    flex-wrap: wrap;  
    justify-content: center;  
    align-items: center;
  }
  .menu-primary-container {  
    width: 100%;
  }
  .toggle-navigation {  
    width: auto;  
    margin: -40px 0 0 36px;
    order: 2;
  }
  .title-container {  
    margin-top: 0;
    order: 1;
  }
}

You’re welcome 🙂