Customize the Footer in MkDocs Using Overrides

In MkDocs, the default theme does not provide a direct option to customize the footer from the configuration file.
However, you can do it using an overrides folder, which allows you to modify the theme’s HTML templates.
Below, I’ll show you step by step how to customize the footer of your documentation.

1. Prepare the Environment

Create a Directory for Overrides

In the root directory of your MkDocs project, create a folder called overrides.
This folder will contain your custom HTML templates.

mkdir overrides

2. Create a Custom Template

Create the Template File

Inside the overrides folder, create a file called main.html. This file will let you modify the default HTML structure of the MkDocs theme.

touch overrides/main.html

Edit the main.html File

Open the main.html file with your text editor and add the following code to override the footer:

{% extends "base.html" %}

{% block footer %}
<footer>
  <div>
    <p>Your custom footer text</p>
    <p>© 2024</p>
  </div>
</footer>
{% endblock %}

• {% extends "base.html" %}: Indicates that we’re extending the base template of the theme.
• {% block footer %}: This is where we customize the footer content. You can modify the HTML as needed.

3. Configure MkDocs to Use Overrides

Modify mkdocs.yml

Open the mkdocs.yml file in the root of your project and add the following configuration to specify the overrides folder:

theme:
  name: 'mkdocs'
  custom_dir: 'overrides'

• custom_dir: 'overrides': Tells MkDocs to look for custom templates in the overrides folder.

4. Verify the Changes

Run the Development Server

To see your changes in real time, run the MkDocs development server:

mkdocs serve

Open your browser and go to http://127.0.0.1:8000. You should see your custom footer on the documentation site.

5. Build the Site

If everything looks good, you can build your site for production with:

mkdocs build

This will generate the static files in the site folder, which you can then deploy to your server.