How to hide the header 1 title of a specific page?

[shenweiyan]

Hi mkdocs-material,

I want to hide the first-level title "Home" in the screenshot below. But if i remove "# Home" a new title appear with the name of file.

Is there any way to do it? Thank you.

[alexvoss]

The discussion contains an approach that should work: #2163

If you need this behavior on many pages then there are probably more elegant solutions such as creating a custom page template or putting the CSS into an extra.css and matching some attribute that the pages in question have in common.

[vinodgangal]

The inline css approach has a major pitfall, some how it removes/hides the version selection drop down also.

[alexvoss]

Answered here: #2163 (comment)

[shenweiyan]

Let me share a solution I used to hide the first-level header on the home page.

1. Referring to material/overrides/home.html, create a template called overrides/home.html with the following content:

{#-
  This file was automatically generated - do not edit
-#}
{% extends "base.html" %}
{% block htmltitle %}
    {% if page.meta and page.meta.title %}
        <title>{{ page.meta.title }}</title>
    {% elif page.title and not page.is_homepage %}
        <title>{{ page.title | striptags }}</title>
    {% else %}
        <title>{{ config.site_name }}</title>
    {% endif %}
{% endblock %}

{% block content %}
    {% include "partials/mycontent.html" %}
{% endblock %}

{% block extrahead %}
    <style>.md-content__button {display:none !important}; </style>
    <style>.md-header__topic {font-weight:700 !important}</style>
{% endblock %}

2. Referring to material/templates/partials/content.html, create a template called overrides/partials/mycontent.html to hide the h1. The content is as follows:

{#-
  This file was generated by shenweiyan - for custom home page and hidding h1 header
-#}
{% if "material/tags" in config.plugins and tags %}
  {% include "partials/tags.html" %}
{% endif %}
{% include "partials/actions.html" %}
{% if "\x3ch1" not in page.content %}
  <!--h1>{{ page.title | d(config.site_name, true)}}</h1-->
{% endif %}
{{ page.content }}
{% include "partials/source-file.html" %}
{% include "partials/feedback.html" %}
{% include "partials/comments.html" %}

3. Finally, apply the template to a specific page, such as docs/index.md. The content is as follows:

---
title: The specific page with hidden the header 1 title 
template: home.html
---

This is my specific page.