Is there an option to show the hamburger left menu by default?

[jrichardsz]

I have several sub folders and the default menu is not responsive when screen is big:

But if I reduce mi screen, the hamburger menu appear

And an awesome infinite menu appear:

So, my question is: How can I set the hamburger menu as default instead the plain left menu.

Thanks

[squidfunk]

There's no option. You would need to patch the theme and adjust the media queries. For starters:

mkdocs-material/src/assets/stylesheets/_config.scss

Lines 28 to 42 in 38e0013

	$break-devices: (
	mobile: (
	portrait: px2em(220px) px2em(479px),
	landscape: px2em(480px) px2em(719px)
	),
	tablet: (
	portrait: px2em(720px) px2em(959px),
	landscape: px2em(960px) px2em(1219px)
	),
	screen: (
	small: px2em(1220px) px2em(1599px),
	medium: px2em(1600px) px2em(1999px),
	large: px2em(2000px)
	)
	);

mkdocs-material/src/assets/javascripts/bundle.ts

Lines 94 to 95 in 38e0013

	const tablet$ = watchMedia("(min-width: 960px)")
	const screen$ = watchMedia("(min-width: 1220px)")

Also, search the source for 1220px – there might be 1-2 further references. You need to increase that value, so the logic kicks in later (or never, if you wish).

[saket]

Can these berakpoints be made configurable by any chances?

I'm trying to make my website look better on foldable devices by not hiding the left sidebar especially when TOC is already integrated with the navigation bar.

[saket]

Alternatively, can these be overridden using custom_dir? I tried adding a overrides/assets/stylesheets/_config.scss but it doesn't seem to get picked up.

[squidfunk]

You need to go through the theme development process, apply your changes and rebuild the theme. Sadly, we cannot make those breakpoints configurable via mkdocs.yml, as I've already explained multiple times, for example in #3210 (comment)

[saket]

Yep you did and I conveniently overlooked that message. Sorry!

[toomanybrians]

I'm trying to do a similar thing, where I want not flip to the hamburger menu too soon. Currently when the browser width goes to less than 1220px, it flips to the hamburger, but I want to shrink the site down to like 1000px or so. (My personal web browsing width is less than 1220 but I want the desktop interface.) I have searched through the discussions and been looking through the CSS and stuff. Is there any way I can make this behavior happen with CSS overrides alone, or do I have to actually change the theme source and recompile it?

Thanks!
Brian

[andrzejdoro]

I would like to have the same behavior as described by @MaximilianKohler. In my use case, I keep the right TOC hidden by default.
I use the following header in the .md file.

---
hide:
  - toc
---

I understand the concept of having about 80 characters visible. However, when the right panel is hidden then there is enough space to reduce the page below 1220px while keeping the left navigation visible.

Additionally, using the popular 1920px resolution, I personally find it inconvenient to keep the browser at about 2/3 the width of the monitor to still have navigation at hand. It would be really helpful if the ability to change the default width behavior was relatively simple and documented.

[squidfunk]

It would be really helpful if the ability to change the default width behavior was relatively simple and documented.

I understand. Please read the entire conversation why this is currently not "relatively simple and documented".

[saket]

I like the idea of hiding TOC and reclaiming that space for the navigation sidebar.

[ghudgins]

1200 is just so so wide. we watch users try our product for the first time and very frequently observe people on desktop monitors putting docs on one half and a terminal or IDE in the other and they don't get the navigation. this theme is so close to being great! (FWIW I do like that it's always visible - saves users a click to navigate around technical documentation)

if you wanted to see what I mean.... https://flox.dev/docs/

[squidfunk]

We're actively working on making SASS compilation a part of the build process of documentation, which means users will be able to change those values. It's also part of a larger effort, as mentioned in our latest blog post.

[jrichardsz]

I tried replacing specific sizes based on the suggested of squidfunk in the bundle unlucky :(