mkdocs-material/docs/setup/setting-up-the-header.md

template
overrides/main.html

Setting up the header

Material for MkDocs' header can be customized to show an announcement bar that disappears upon scrolling, and provides some options for further configuration. It also includes the search bar and a place to display your project's git repository, as explained in those dedicated guides.

Configuration

Automatic hiding

:octicons-file-code-24: Source · :octicons-unlock-24: Feature flag · :octicons-beaker-24: Experimental · :octicons-heart-fill-24:{: .tx-heart } Insiders only{: .tx-insiders }

When auto-hiding is activated, the header is automatically hidden when the user scrolls past a certain threshold, leaving more space for content. It can be enabled via mkdocs.yml with:

theme:
  features:
    - header.autohide

Give this feature a try on the official documentation built with Material for MkDocs Insiders!

Customization

Announcement bar

Material for MkDocs includes an announcement bar, which is the perfect place to display project news or other important information to the user. When the user scrolls past the header, the bar will automatically disappear. In order to add an announcement bar, extend the theme and override the announce block, which is empty by default:

{% block announce %}
  <!-- Add your announcement here, including arbitrary HTML -->
{% endblock %}