Making navbar width consistent with the main layout on large displays

[jetxr]

Have you read the Contributing Guidelines on issues?

• I have read the Contributing Guidelines on issues.

Description

• On large displays, the navbar's width isn't matched to the main content, footer, and it expands to the edges of the screen making it easy to miss the navbar's contents. (demonstrating the issue on docusaurus.io below in screenshot)

• However, if max-width and justify-content are applied, it makes the navbar more consistent with the rest of the design.

• I've added the following to my custom.css, and it seems to be working

.navbar {
	justify-content: center;
}

.navbar__inner {
	max-width: var(--ifm-container-width-xl);
}

• Should this be Docusaurus' default behavior?

---

Issue

---

Suggested Change

Has this been requested on Canny?

No response

Motivation

• On large displays, with main body having a max width, it's looks a bit out of place to have the menu items at the edges, and not have the navbar as the same width as the rest of the content.

• When the nabar is the same max width as the content area, you don't need to scan the entire width of the screen. The entire page stays a vertical scannable area. For ex. https://developer.apple.com/documentation/Xcode/Xcode-Cloud

API design

No response

Have you tried building it?

No response

Self-service

• I'd be willing to contribute this feature to Docusaurus myself.

[Josh-Cena]

Agree, feel free to send a PR!

Note, there are a few nuances. For example, I think it's perfectly fine for my 1440px screen to have the navbar take up the entire width, so maybe the navbar should still be a bit wider than the main content, just not stretching all the width.

[jetxr]

Yes, makes sense to apply it to screens > 1440px. Could use a media query to do that. Will try and send a PR this week.

[Josh-Cena]

It's a bit awkward that we only have 996px as the only cutoff currently. We should have a more nuanced screen width system, like xl/lg/md etc... For example, we would want to display icons-only on medium-sized screens (e.g. ipads) (ref #7566)

[LichLord91]

Added this to my own website, however I noticed the Sidebar in docs (at least when set to hideable) sticks to the left as well and in @jetxr example of the Apple site it remains centered with the rest of the content. Any suggestions in changing this behavior?

[jetxr]

Adding a max-width and margin: auto to main-wrapper seemed to work. Not sure if it's the best way to do it. Also, new to Docusaurus, so I don't know if this will have an effect on something else. Maintainers can confirm.

To be honest, sidebar sticking to the edge of a large screen, while having the navbar centered does looks odd. So on docs pages, if the navbar has to be centered, the sidebars should be as well.

On non-docs pages, the centered navbar might be preferable for some. But on the docs pages, both the options (full-width navbar + left-aligned sidebar vs centered page) have their uses.

Might be a better idea to make this configurable, and part of a larger task?

[Josh-Cena]

We'd rather offer a good default and let users override with custom CSS.

[jetxr]

Makes sense. Adding a couple of lines of CSS does the work.

I do however think having the navbar centered for large-screens on non-docs pages is a better default.

@Josh-Cena leaving it up to you if we can keep this issue open. As such, there is a solution.

[Josh-Cena]

The site with the closest layout that comes to mind is https://www.typescriptlang.org/. Here's what they got:

The navbar grows infinitely, but the main content has max-width. That's very close to what we do. OTOH, https://mui.com/ has a constrained navbar for the landing page but a wide navbar for the docs, which is what you want.

In Docusaurus v1, the navbar always has a constrained width.

Related to #4347. @orta ideas on how the navbar should grow?