Enable sticky navigation tabs for index page only

[ThatOtherAndrew]

As the title suggests, I've been looking for a way to have the navigation.tabs.sticky feature off, but override it to be on for the home page only.

I tried the following Jinja2 syntax in a template:

{% block header %}
  {% with features = ['navigation.tabs', 'navigation.tabs.sticky'] %}
    {% include "partials/header.html" %}
  {% endwith %}
{% endblock %}

Which worked on the Jinja2 side of things, however I think there is JS code running which still recognises the feature as being turned off, as the navigation bar gets hidden again on page load.

I also tried the more hacky solution of appending to features in a template which worked as intended for the home page, but resulted in the sticky feature being turned on globally - even pages which don't use the template.

{% block header %}
  {{ features.append('navigation.tabs.sticky') or '' }}
  {% include "partials/header.html" %}
{% endblock %}

Is there any straightfoward way to accomplish this?

[kamilkrzyskow]

Hello @ThatOtherAndrew,
you could try adjusting and using the hook I've posted in:

• How to disable navigation.sections on blog? #6865 (comment)

The context should be newly created for each page, but the features are global for each processed page due to how reference passing works in Python, so you need to manage modifying it and restoring it on your own.

---

If you want to stick to the custom template approach for the index page alone then here are some pointers:

Your first approach with the with statement is better, as it should modify the features only for that include limited to the header block. However, keep in mind it always sets features to those 2 features, which might not be ideal if you want to still control the features from mkdocs.yml.

You also need to modify the config block that passes information to the JavaScript to include the the features you want:

mkdocs-material/src/templates/base.html

Lines 388 to 431 in 1c7e954

	<!-- Theme-related configuration -->
	{% block config %}
	{%- set app = {
	"base": base_url,
	"features": features,
	"translations": {},
	"search": "assets/javascripts/workers/search.js" | url
	} -%}
	<!-- Versioning -->
	{%- if config.extra.version -%}
	{%- set mike = config.plugins.get("mike") -%}
	{%- if not mike or mike.config.version_selector -%}
	{%- set _ = app.update({ "version": config.extra.version }) -%}
	{%- endif -%}
	{%- endif -%}
	<!-- Tags -->
	{%- if config.extra.tags -%}
	{%- set _ = app.update({ "tags": config.extra.tags }) -%}
	{%- endif -%}
	<!-- Translations -->
	{%- set translations = app.translations -%}
	{%- for key in [
	"clipboard.copy",
	"clipboard.copied",
	"search.result.placeholder",
	"search.result.none",
	"search.result.one",
	"search.result.other",
	"search.result.more.one",
	"search.result.more.other",
	"search.result.term.missing",
	"select.version"
	] -%}
	{%- set _ = translations.update({ key: lang.t(key) }) -%}
	{%- endfor -%}
	<!-- Configuration -->
	<script id="__config" type="application/json">
	{{- app | tojson -}}
	</script>
	{% endblock %}

features.append('navigation.tabs.sticky') or '' is basically None or '', so '', but it always appends that feature to the global features list on each header block run. Even if you limit this change to the custom template, then it still modifies the global reference to the features as pointed out above with the hook.

[ThatOtherAndrew]

Thank you for your quick response. I've had a shot at modifying the config with the following:

{% block config %}
  {% with features = features + ['navigation.tabs.sticky'] %}
    {{ super() }}
  {% endwith %}
{% endblock %}

The "skeleton" of the sticky navigation tabs load in, however some client JavaScript is immediately hiding it on page load, leaving just the coloured background element.

Doing a bit of rather hacky debugging by throwing {{ app }} directly into the original base.html file, it showed that navigation.tabs.sticky wasn't being added correctly. Trying again using set features didn't work either, and my rudimentary Jinja2 knowledge isn't good enough to figure out the most elegant solution. So, hacky solution it is:

{% block config %}
  {%- set app = {
    "base": base_url,
    "features": features + ['navigation.tabs.sticky'],
    ... (everything else copied from parent)

Thank you very much for your help!