Implement partial override at specific size

[sbxchicago]

Hello, I'm curious if it is possible to use a partial to override a part of the theme at certain sizes. For example, to use a custom header at desktop sizes, but revert to the nav system provided by the Material theme at smaller viewports.

Thanks for the time.

[squidfunk]

Yes, that's possible. I suggest that you look at our navigation tabs implementation that is only mounted on screens above 1220px.

Specifically here:

mkdocs-material/src/partials/tabs.html

Lines 26 to 39 in 99eed0e

	<!-- Navigation tabs -->
	<nav
	class="md-tabs"
	aria-label="{{ lang.t('tabs') }}"
	data-md-component="tabs"
	>
	<div class="md-tabs__inner md-grid">
	<ul class="md-tabs__list">
	{% for nav_item in nav %}
	{% include "partials/tabs-item.html" %}
	{% endfor %}
	</ul>
	</div>
	</nav>

... and here:

mkdocs-material/src/assets/stylesheets/main/components/_tabs.scss

Lines 44 to 47 in 99eed0e

	// [tablet -]: Hide tabs
	@include break-to-device(tablet) {
	display: none;
	}

Note that break-to-device is a custom function that we defined. You could also resort to plain media queries for this.