fix(theme): constrain navbar width to match main layout on wide displays#11782
fix(theme): constrain navbar width to match main layout on wide displays#11782travisbreaks wants to merge 1 commit intofacebook:mainfrom
Conversation
On wide screens (>1400px+), the navbar stretches to the screen edges while the main content area and footer are constrained by --ifm-container-width. This adds max-width to .navbar__inner and centers it within the navbar, so navbar items align with the rest of the page content. The navbar background still spans the full viewport width. Closes facebook#7562 Co-authored-by: Egger <egger@horny-toad.com>
|
Hi @travisbreaks! Thank you for your pull request and welcome to our community. Action RequiredIn order to merge any pull request (code, docs, etc.), we require contributors to sign our Contributor License Agreement, and we don't seem to have one on file for you. ProcessIn order for us to review and merge your suggested changes, please sign at https://code.facebook.com/cla. If you are contributing on behalf of someone else (eg your employer), the individual CLA may not be sufficient and your employer may need to sign the corporate CLA. Once the CLA is signed, our tooling will perform checks and validations. Afterwards, the pull request will be tagged with If you have received this in error or have any questions, please contact us at cla@meta.com. Thanks! |
✅ [V2]Built without sensitive environment variables
To edit notification comments on pull requests, go to your Netlify project configuration. |
slorber
added
the
Argos
slorber
left a comment
slorber
left a comment
There was a problem hiding this comment.
Can you please at least show a before screenshot showing the problem visually, and an after screenshot ?
This change is not in the ideal place, and is disruptive enough in terms of layout that we'll likely not want this to be in v3.x
| with the rest of the page content. | ||
| See https://github.com/facebook/docusaurus/issues/7562 | ||
| */ | ||
| :global(.navbar) { |
There was a problem hiding this comment.
these global classes are usually defined in our css framework infima.dev
2 participants
Summary
On wide screens (1400px+), the navbar stretches to the screen edges while the main content area and footer are constrained by
--ifm-container-width. This creates a visual disconnect where navbar items sit far from the page content they relate to.This PR adds two small CSS rules to constrain the navbar inner content:
.navbargetsjustify-content: centerso the inner content centers within the full-width navbar.navbar__innergetsmax-width: var(--ifm-container-width)andwidth: 100%to constrain its width while the navbar background still spans the full viewportThis matches the approach suggested in the issue and aligns with how Docusaurus v1 handled navbar width. The navbar background color/border still spans the full viewport width; only the inner content (logo, links, search) is constrained and centered.
Motivation
Closes #7562
Test plan
Co-authored-by: Egger egger@horny-toad.com
🤖 Generated with Claude Code