Playing with the header elements position

If you're after centering the classic menu please use this CSS code at the end of the assets/theme.css file (or assets/css_main.scss.liquid if your theme version is 2.4.2 or lower) (screen record):

@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;
  }
}

To have the classic menu display on the left and the logo image centered, please use:

@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: 35px !important;
  }
  .logo {
    z-index: 1 !important;
  }
}
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.