How to change the header color in docfx standard template

Question

Have been struggling with the header color in the css for some while. I was able to change the footer, but not sure how to access the header element and change the color. Please reference the screenshot for context

Answer 1

Add a directory structure like this to root:

templates/
  my-template/
    styles/
      main.css

In docfx.json, add "templates/my-template" in the template object inside the build object:

    "template": [
      "default",
      "templates/my-template"
    ]

In templates/my-template/styles/main.css, add something like:

.navbar {
    background-color: green;
}

.subnav {
    background-color: blue;
}

As reference, you can see the classes that construct the navbar this way:

• Run docfx template export.
• Find _exported_templates/default/partials/navbar.tmpl.partial.

To modify the partial directly, copy navbar.tmpl.partial here and modify:

templates/
  my-template/
    partials/
      navbar.tmpl.partial