Subsections expanded always on screen width < 1220px without need to click

[rofrol]

I have a request from one of the users of https://zighelp.org/ to use mdbook as it has saner navigation on mobile.

I would like to keep mkdocs-material as it offers more options and feels nicer.

I think this is responsible for navigation sections https://squidfunk.github.io/mkdocs-material/setup/setting-up-navigation/#navigation-sections,

but I don't know how to customize it, so that sections are always expanded also on small screens.

This is my config https://github.com/zighelp/zighelp/blob/master/mkdocs.yml

zighelp:

mdbook:

[squidfunk]

Thanks for asking. IMHO, what is saner and what is not always depend on your point of view and the size of your site. Our mobile navigation is designed in a way that it scales without any additional effort, but I can understand that some users don't like that it is split into distinct panes. It's certainly possible to override navigation with custom CSS, making it look exactly like the one from mdbook, but it's likely some effort that you'd need to go through. You probably would also need to fork the theme, because otherwise you would have to override all properties for all elements, which would also be a maintenance nightmare once we make updates to the CSS.

That being said, we might add a new navigation design in the future, but there are currently no plans when this might be the case. We have other things that we need to fix first ☺️ Additionally, from our experience, mobile navigation is only used in 10% of cases – at least on our site, and we've had it for ages now. Note that it also works with JavaScript disabled.

[rofrol]

to override navigation with custom CSS, making it look exactly like the one from mdbook, but it's likely some effort that you'd need to go through. You probably would also need to fork the theme, because otherwise you would have to override all properties for all elements, which would also be a maintenance nightmare once we make updates to the CSS.

That would be it. How can I start with that?

[squidfunk]

Fork the theme, set up the development environment, adjust _nav.scss – that's where all styles are defined, particularly this part, which defines the styles for mobile navigation, and rebuild the theme:

mkdocs-material/src/templates/assets/stylesheets/main/components/_nav.scss

Lines 182 to 438 in 929fc39

	// [tablet -]: Layered navigation
	@include break-to-device(tablet) {
	// Primary and nested navigation
	&--primary,
	&--primary & {
	position: absolute;
	inset-inline: 0;
	top: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	height: 100%;
	background-color: var(--md-default-bg-color);
	}
	// Primary navigation
	&--primary {
	// Navigation title and item
	:is(.md-nav__title, .md-nav__item) {
	font-size: px2rem(16px);
	line-height: 1.5;
	}
	// Navigation title
	.md-nav__title {
	position: relative;
	height: px2rem(112px);
	padding: px2rem(60px) px2rem(16px) px2rem(4px);
	line-height: px2rem(48px);
	color: var(--md-default-fg-color--light);
	white-space: nowrap;
	cursor: pointer;
	background-color: var(--md-default-fg-color--lightest);
	// Navigation icon
	.md-nav__icon {
	position: absolute;
	top: px2rem(8px);
	inset-inline-start: px2rem(8px);
	display: block;
	width: px2rem(24px);
	height: px2rem(24px);
	margin: px2rem(4px);
	// Navigation icon in link to previous level
	&::after {
	display: block;
	width: 100%;
	height: 100%;
	content: "";
	background-color: currentcolor;
	mask-image: var(--md-nav-icon--prev);
	mask-position: center;
	mask-repeat: no-repeat;
	mask-size: contain;
	}
	}
	// Navigation list
	~ .md-nav__list {
	overflow-y: auto;
	touch-action: pan-y;
	background-color: var(--md-default-bg-color);
	box-shadow:
	0 px2rem(1px) 0 var(--md-default-fg-color--lightest) inset;
	scroll-snap-type: y mandatory;
	// Omit border on first child
	> :first-child {
	border-top: 0;
	}
	}
	// Top-level navigation title
	&[for="__drawer"] {
	font-weight: 700;
	color: var(--md-primary-bg-color);
	background-color: var(--md-primary-fg-color);
	}
	// Button with logo, pointing to `config.site_url`
	.md-logo {
	position: absolute;
	inset-inline: px2rem(4px);
	top: px2rem(4px);
	display: block;
	padding: px2rem(8px);
	margin: px2rem(4px);
	}
	}
	// Navigation list
	.md-nav__list {
	flex: 1;
	}
	// Navigation item
	.md-nav__item {
	border-top: px2rem(1px) solid var(--md-default-fg-color--lightest);
	// Navigation link in active navigation
	&--active > .md-nav__link {
	color: var(--md-typeset-a-color);
	// Navigation link on focus/hover
	&:is(:focus, :hover) {
	color: var(--md-accent-fg-color);
	}
	}
	}
	// Navigation link
	.md-nav__link {
	padding: px2rem(12px) px2rem(16px);
	margin-top: 0;
	// Navigation link icon
	svg {
	margin-top: 0.1em;
	}
	// Adjust spacing on nested link
	> .md-nav__link {
	padding: 0;
	}
	// Navigation icon
	.md-nav__icon {
	width: px2rem(24px);
	height: px2rem(24px);
	margin-inline-end: px2rem(-4px);
	font-size: px2rem(24px);
	// Navigation icon in link to next level
	&::after {
	display: block;
	width: 100%;
	height: 100%;
	content: "";
	background-color: currentcolor;
	mask-image: var(--md-nav-icon--next);
	mask-position: center;
	mask-repeat: no-repeat;
	mask-size: contain;
	}
	}
	}
	// Flip icon vertically
	.md-nav__icon {
	// Adjust for right-to-left languages
	[dir="rtl"] &::after {
	transform: scale(-1);
	}
	}
	// Table of contents contained in primary navigation
	.md-nav--secondary {
	// Navigation on level 2-6
	.md-nav {
	position: static;
	background-color: transparent;
	// Navigation link on level 3
	.md-nav__link {
	padding-inline-start: px2rem(28px);
	}
	// Navigation link on level 4
	.md-nav .md-nav__link {
	padding-inline-start: px2rem(40px);
	}
	// Navigation link on level 5
	.md-nav .md-nav .md-nav__link {
	padding-inline-start: px2rem(52px);
	}
	// Navigation link on level 6
	.md-nav .md-nav .md-nav .md-nav__link {
	padding-inline-start: px2rem(64px);
	}
	}
	}
	}
	// Table of contents
	&--secondary {
	background-color: transparent;
	}
	// Hide nested navigation
	&__toggle ~ & {
	display: flex;
	opacity: 0;
	transition:
	transform 250ms cubic-bezier(0.8, 0, 0.6, 1),
	opacity 125ms 50ms;
	transform: translateX(100%);
	// Adjust for right-to-left languages
	[dir="rtl"] & {
	transform: translateX(-100%);
	}
	}
	// Show nested navigation when toggle is active
	&__toggle:checked ~ & {
	opacity: 1;
	transition:
	transform 250ms cubic-bezier(0.4, 0, 0.2, 1),
	opacity 125ms 125ms;
	transform: translateX(0);
	// Navigation list
	> .md-nav__list {
	// Hack: promote to own layer to reduce jitter
	backface-visibility: hidden;
	}
	}
	}
	// [tablet portrait -]: Layered navigation with table of contents
	@include break-to-device(tablet portrait) {
	// Show link to table of contents
	&--primary &__link[for="__toc"] {
	display: flex;
	// Show table of contents icon
	.md-icon::after {
	content: "";
	}
	// Hide navigation link to current page
	+ .md-nav__link {
	display: none;
	}
	// Show table of contents
	~ .md-nav {
	display: flex;
	}
	}
	// Repository information container
	&__source {
	display: block;
	padding: 0 px2rem(4px);
	color: var(--md-primary-bg-color);
	background-color: var(--md-primary-fg-color--dark);
	}
	}