MediaWiki:Minerva.css

Note: After publishing, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

/* All CSS here will be loaded for users of the MinervaNeue skin */

/* Fix overlapping logo on mobile and clean up header layout */
.skin-minerva .minerva-header {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding-top: 0.5em;
}

/* Center the logo and make it responsive */
.skin-minerva .minerva-header .mw-logo {
    display: block !important;
    text-align: center !important;
    margin: 0 auto 0.25em auto !important;
    width: auto !important;
}

.skin-minerva .minerva-header .mw-logo img {
    max-width: 160px !important;
    height: auto !important;
    display: inline-block !important;
}

/* Properly align menu icons under the logo */
.skin-minerva .minerva-header .minerva-user-navigation,
.skin-minerva .minerva-header .minerva-menu {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
    margin-top: 0.2em !important;
}

/* Prevent overlap and spacing issues */
.skin-minerva .minerva-header .minerva-user-navigation a,
.skin-minerva .minerva-header .minerva-menu a {
    margin: 0 6px !important;
}

@media (max-width: 720px) {
    .skin-minerva .minerva-header {
        flex-wrap: wrap !important;
    }
}