Playing with the header elements position on desktop screens

If you're after centring the classic menu please use this CSS code in Theme Settings > Custom CSS:

@media screen and (min-width: 1025px) {
  .site-nav.style--classic {
    width: 100% !important;
    text-align: center !important;
  }
  .site-header .site-nav-container {
    width: 100% !important;
    display: block !important;
  }
  .logo {
    z-index: 1 !important;
  }
}

If you have the classic menu and you want to display it on the left and the logo image centred you can use this CSS code in the same place (please note that this would work only if you have just a couple of menu items that would fit on half of the screen):

@media screen and (min-width: 1025px) {
  .site-header {
    flex-direction: column;
  }
  .site-header .site-nav-container {
    width: 100% !important;
    display: block !important;    
  }
  .site-nav.style--classic {
    width: 100% !important;
    text-align: left !important;
    margin-top: -45px !important;
  }
  .logo {
    z-index: 1 !important;
  }
}

If you are using the "minimal" menu style, please use this CSS code to center the logo image on larger screens:

@media screen and (min-width: 1025px) {
  .site-header {
    flex-direction: column;
  }
  .site-header .site-nav-container {
    width: 100% !important;
    display: block !important;    
  }
  .site-header .site-nav-container>* {
    display: none !important;
  }
  .site-nav.style--classic {
    position: absolute;
    right: 50px !important;
    top: 20px !important;
  }
  .logo {
    z-index: 1 !important;
  }
}