Is it possible to move the location of the menu toggle on mobile only?

My colleague Ernesto provided this custom CSS that should do the trick:

.menu-toggle {
  -webkit-transform: translateX( -50% );
  -moz-transform: translateX( -50% );
  transform: translateX( -50% );
  left: 50%;
}

Don’t edit the theme files directly, otherwise your changes will be overwritten every time the theme is updated to the latest version.

An easy way to add custom CSS is to install the Jetpack plugin and activate the Custom CSS module. You’ll then add your custom CSS in the new stylesheet editor that’ll appear in your dashboard, under Appearance > Edit CSS.

As alternatives, you could either install a standalone custom CSS plugin, or create a child theme.

Thank you! I needed to make other alterations in addition to those you provided in order to get it positioned correctly, but it worked perfectly!

Ah, I totally missed the word “mobile” in your subject line, so you would need to put the code in a media query to have it apply only to small screens. This would only affect screens under 480px, for example:

@media screen and (max-width: 480px) {
  .menu-toggle {
    -webkit-transform: translateX( -50% );
    -moz-transform: translateX( -50% );
    transform: translateX( -50% );
    left: 50%;
  }
}