How to keep navigation pane with narrower windows?

[hsutter]

Is there a way to make the left navigation pane stay visible at slightly higher browser Zoom levels / narrower browser windows?

This screenshot from my documentation shows the left navigation pane:

... but when I hit the browser's Ctrl-+ (zoom in) just one more time (because the text is a bit small) or narrow the window slightly, the navigation pane disappears:

It seems like there's still plenty of room for the pane, given all the empty space / long text lines on the right half of the screenshot? Losing that navigation pane is sad, because it's so super useful. Without it, I quickly lose track of where I am in my own documentation.

I looked in the docs but the navigation.* options I tried didn't seem to affect it.

Update: I suspect the answer is related to the 1220px limit value. Perhaps it's worth considering changing that to 1024px or even 900px? I encountered this problem using a vertical monitor, where the default browser 100% zoom level triggers the limit to hide the navigation, so it seems the navigation is invisible by default on at least some vertical monitors. Even though the text is pretty small (and lines pretty long) at that default zoom, I had to Ctrl - to make the navigation visible, which makes text even smaller (and lines even longer).

[alexvoss]

You are right that this is related to the break points defined in _config.scss. If I understand things correctly, this is not that easy to change since this value is fed into calculations that make the behaviour dependent on the font size, which is what you are observing when you change that using your browser's shortcuts.

If you wanted to change this, the best way would be to compile the theme yourself and adjust the 1220px value in the config file. You would need to fix your version or maintain this going forward, though. Your call if that would be worth it.

Doing this after the CSS has been compiled is somewhat difficult and fragile. I have seen @kamilkrzyskow answer a similar question by digging into the CSS in the browser developer tools. Overriding like this seems fragile, though.

As to whether this could be made configurable in the future, I am not sure. The theme is already configurable in many ways and the answer when something can be done by customization is often that it should be done that way by the user so as to not bloat the code and documentation for every conceivable adjustment. In this case, however, there may not be an easy way to customize. I will need to tag @squidfunk here to weigh in and tell us that we are holding the wrong end of the stick or to opine on whether there is a chance this could be made configurable. The way that the SCSS gets compiled into CSS does seem to make this somewhat unlikely but then I am not familiar enough to give a definitive answer.

I would also say that changing this may cause problems elsewhere. You may not be happy on your tilted monitor but would the result work for someone with a different device? There are so many combinations of size and resolution out there. I travel a fair bit, so have a 13" display with 2K resolution that I use in portrait mode - a perfect way to highlight the imperfections of our technical world... Just my 2p.

[squidfunk]

As to whether this could be made configurable in the future, I am not sure.

Once @custom-media is supported, we can make it configurable. Until then, the theme needs to be recompiled. Please understand that we cannot just change this value. Tens of thousands of sites would be impacted. Note that on tablet, normally, the table of contents occupies the space on the right, but since you're using table of contents integration, it appears to be even wider. However, we cannot make the significantly complex navigation CSS any more complex, adding further exceptions for specific features.

The fact that we compile all of this from SCSS makes it adjustable in the first place. If we'd just use CSS, you would have to adjust every single instance. Since we compile SCSS, you can adjust the following values to fit and recompile:

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

Lines 27 to 42 in 55603a7

	// Device-specific breakpoints
	$break-devices: (
	mobile: (
	portrait: px2em(220px) px2em(479.75px),
	landscape: px2em(480px) px2em(719.75px)
	),
	tablet: (
	portrait: px2em(720px) px2em(959.75px),
	landscape: px2em(960px) px2em(1219.75px)
	),
	screen: (
	small: px2em(1220px) px2em(1599.75px),
	medium: px2em(1600px) px2em(1999.75px),
	large: px2em(2000px)
	)
	);

Note that some further adjustments to the JavaScript source might be necessary as well.

[hsutter]

Thanks for both answers! I can only mark one as the answer but both are helpful.

since you're using table of contents integration

Thanks, disabling that has partly mitigated my immediate problem — now the ToC shows on the right at the default zoom/width on a vertical monitor, though it's not quite as pretty as it was when integrated in the navigation. (And the ToC still disappears too quickly on zoom/narrowing, when body text lines are still avg. 19 words long, so I'd still love a configuration option when @custom-media is supported. But it disappears less quickly than when integrated in navigation.)

Thanks again for this great project.