docusaurus
docusaurus copied to clipboard
facebook
Making navbar width consistent with the main layout on large displays
Have you read the Contributing Guidelines on issues?
- [X] 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-widthandjustify-contentare 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.
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.
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.
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)
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?
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?
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.
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?
Alas "it depends" there are a few constraints to consider with this decision (I'll describe them from TS' side)
- The navbar being consistent feels pretty important as its a primary way to get around IMO
- Different pages need different width constraints
- Long bodies of text gets much harder to read at wider widths,
- Pages like the playground want to be full bleed at whatever side
For the TS site, I opted to have a consistent left nav rather than having it changing because the playground represents a large amount of the site traffic.
Looking at Jest's docs, there isn't really a page which needs a full bleed layout - the biggest design conflict comes from the nav column which always aligns left edge and the content which is max width and centered. If the navigation column moves in with the center, then I'd say its a pretty easy win for team 'center the top nav'
If keeping that permanently right aligns is a preferred, then I think it might still feel better to keep the nav also right + left aligned
Just a thought.. would it be ideal to set the max width of the entire site to 1730px? (16" MBP)
Anything wider would probably be an external display/very large display, and it's not too comfortable to scan content horizontally at that width.
It would:
- Make the navbar be consistent on all pages, and keep sidebar navigation close/closer to content
- Suits a documentation site, which will mostly be readable content
- Can be turned off for the whole site with global CSS if the user wants to make whole site full bleed
- On pages which need to be 100% full bleed even on super large screens, the max-width can be turned off, and the content can be placed in 'break-out' sections and won't look broken (?)
(TypeScript Playground with full-bleed but constrained navbar)
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;
}
The @jetxr initial proposal worked for me. Other method is this css used by the ReactNative website, for instance, in this page
@LichLord91 solution works well but I've added this to have 100% navbar width on the docs pages, where sidebar sticks to the left side of the screen:
html.docs-doc-page .navbar .navbar__inner {
max-width: 100%;
}
