Snippets: Center Logo For Mobile Devices

Important: Since version 3.0.8 you can actually choose this style already in the Customizer under the Mobile Menu panel.

/* Center Logo For Mobile Devices (adjust max-width accordingly) */
@media only screen and (max-width: 959px) {
  #site-header #site-logo {    
    float: none;    
    display: block;    
    text-align: center;    
    width: 100%;
    max-width: none;
  }
  #site-logo-inner {    
    display: block;
  }
  #site-header #site-logo img {    
    display: inline;    
    float: none;
  }
}

/* This part centers the mobile menu toggle - ONLY add his code if you want this also*/
#mobile-menu {
    position: inherit;
    top: auto;
    right: auto;
    margin: 0;
    float: none;
    text-align: center;
    padding-top: 20px;
}

#mobile-menu a {
    display: inline-block;
    float: none
;
}

Snippet Type: CSS

Posted Under: Logo

All CSS snippets should be added via a child theme's style.css file or using the built-in Custom CSS panel.