how to add a button in the header navigation?

[carolhuang1990]

Hi,
Is there any way to add a button in the header navigation.
For example, I want to add a button [Live demo] beside the searching bar.
Is that possible?
I've tried to customize the header.html, but get some errors, and cannot find any instructions in the documentations.

Thanks&Regards
Carol

[linxianmiao]

class="md-button md-button--primary"
you can use like this :

[linxianmiao]

<a href="xxxx" class="md-button md-button--primary"></a>

[carolhuang1990]

@linxianmiao Thanks for your reply.
I just want to know how to add the button in the header (beside the searching box). :)
Or, how to customize the header.

[jasonren0403]

I think these docs will help:

• Buttons
• Header - announcement bar

That is to say, extend base.html and add button to block announce.

[linxianmiao]

black cat, my laopo!

[Stephen-Gates]

@carolhuang1990 did you get this working?

[LIGHTnik10]

Hi,
I know I am late but still want to just solution in case someone needs it in future.
So to implement button in to the header you need to extend the theme
Extend i.e. Customize

1. Write overrides inside yml file.
2. Create a main.html file inside overrides.
3. Use this script(mentioned also in the link provided above):
   `{% extends "base.html" %}

{% block scripts %}

{{ super() }}

{% endblock %}
`
4.Before the super copy the header.html file code inside mkdocs-materail repo, just search for it you will find it and then edit that html by however you want the button to be. I usually take reference for buttons from w3 schools.
5. Run the file it should work.
I know it's not perfect, but it's what worked for me.
Feel free to drop in any queries.

[ooker777]

Here is the header.html. To be clear, it's not copying the its content into main.html, but copy the file to your overrides/partial/ folder

[ddxv]

Thanks, your posts helped me get it:

This doc is also very helpful and describes the general way to do this:
https://squidfunk.github.io/mkdocs-material/customization/?h=exte#extending-the-theme

I copied header.html from header.html (note it seems to have moved since @ooker777's link) to overrides/partials/header.html

Inside overrides/partials/header.html I added:
<a class="md-header__button" href="https://openattribution.dev"><h3>openattribution.dev</h3></a<>

I used the md-header__button class as it's used for other items in the header.

[tpdorsey]

In a previous version of the Prefect docs, I added a tab menu item in the header bar with a link to our Cloud UI by extending the tabs.html partial: https://github.com/PrefectHQ/prefect/blob/2.8.4/docs/overrides/partials/tabs.html

Then to position it always on the right:

.cloud-link {
    margin-left: auto;
}

Maybe that gives you some ideas how to implement.

[ooker777]

It works. Thanks. Can you tell where to put that css?

[tpdorsey]

extra.css

[ooker777]

In my case I make use of the link to the git button in the header. It would look like this:

If you don't use a github link it won't display the tag/star/fork number below.

Put this in your mkdocs.yml:

repo_url: https://example.com
repo_name: Button name
theme:
    icon:
      repo: octicons/download-16