How I Unified the Mobile Sidebar Top Color with the Main Header in MkDocs Material

[wins-wang]

💡 How I Fixed the Mobile Drawer Header or Navigation Header Color in MkDocs Material

When working with MkDocs Material to build documentation, I successfully customized the color of the top header bar using CSS.

However, I noticed that on mobile devices, when you open the sidebar (the hamburger menu with three lines), the top section of the mobile drawer still remained the default purple color — even though I wanted it to match my customized header color.

---

🛠️ Problem

• Desktop header color → correctly customized via .md-header, .md-tabs.
• Mobile sidebar (drawer) header → still showed default purple, even after trying to adjust .md-drawer__header.

---

🔍 Solution

After inspecting the HTML and CSS structure, I realized that the mobile drawer’s top title bar is controlled by the following class:

.md-nav__title {
    background-color: #1B2733 !important;
}

This class targets the title area of the sidebar on mobile devices, so to synchronize its color with the desktop header, you need to override it explicitly in your extra.css file.

---

Final Steps

1. In your extra.css (already connected in mkdocs.yml):

/* Unify mobile drawer top header color */
.md-nav__title {
    background-color: #1B2733 !important;
}

2. In your mkdocs.yml, make sure you have:

extra_css:
  - css/extra.css

3. Deploy or rebuild your site, and clear your browser cache (e.g., in Chrome, use Shift + Reload) to see the updated styles reflected.

---

[kamilkrzyskow]

As per the documentation you can set custom colors to the CSS variables and all related elements will have a unified color.
Relying on these variables should simplify the overall hassle when analyzing the CSS for each element.
https://squidfunk.github.io/mkdocs-material/setup/changing-the-colors/#custom-colors

In case of the header and mobile drawer the following CSS variables are being used:

:root > * {
  --md-primary-fg-color: #1B2733;
  --md-primary-fg-color--dark: #000;
}

Instead of setting them globally with :root > * you can also limit the change to a specific range based on the selector.

Instead of using !important flag in your example you can also match the Specificity of the previous selector, like .md-nav--primary .md-nav__title[for="__drawer"], as for the @media query it can be omitted in this case, because it hides the drawer in desktop layout.

Specificity also applies to dark/white mode, as the theme adds [data-md-color-primary="black"] to the selector.