Center Logo For Mobile Devices
This is a Developer Level doc.
If you're unfamiliar with CSS and/or editing files, codes and templates, as well as with resolving possible conflict, please seek help from a professional. Under our Support Policy, we don't provide support for modifications and customization.
If you wish to your logo and the hamburger icon (bars icon) to be aligned in the center of the mobile menu (if you're using the minimal header style, for examples, which aligns everything in one row), then use the following CSS snippet:
/* Center Logo For Mobile Devices */
@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 #site-logo-inner {
display: block;
height: auto;
}
}
/* This part centers the mobile menu toggle */
.oceanwp-mobile-menu-icon {
float: none !important;
right: auto !important;
text-align: center;
}
Adjust the max-width value accordingly.
All CSS snippets should be added via a child theme's style.css file or using the built-in Custom CSS panel.
Useful Link: CSS Media Query