Making navbar width consistent with the main layout on large displays

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.

[LichLord91]

Looking at https://theochu.com and reading the css in dev tools. I like the solution he came up with. Seems to work great on mobile/full screen and with collapsible button.

@media (min-width: 1416px) {
	.main-wrapper {
		align-self: center;
		max-width: 1400px;
		width: 1400px;
	}
}

.navbar .navbar__inner {
    margin: 0 auto;
    max-width: 1360px;
}

[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?