question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Nav items overflowing navbar on medium viewports

See original GitHub issue

Describe the bug

When using the default theme, the navbar items are hidden away in a menu on screen widths lower than 768px.

At 768px and slightly larger sizes, the navbar may have to render on one line:

  • The logo and site title
  • A search box (when using the algolia options)
  • Several nav items
  • And the “extra navigation” button

When the nav items don’t fit, their text may wrap, and their extreme line-height makes that result particularly bad:

Screenshot 2022-09-01 at 23 57 42

Reproduction

  1. Visit reproduction on StackBlitz: https://stackblitz.com/edit/vitepress-theme-issue-navbarmenulink?file=index.md
  2. Resize the preview area to be roughtly 800px wide

Expected behavior

There are two levels of fixes:

  1. Mitigate the breakage when nav items do wrap.

    • Nav links should not use the header height as their line-height (that’s a bad way to do vertical centering of text, for the reason demonstrated in this issue).
    • Instead use something like min-height: var(--vp-nav-height-mobile); line-height: normal; (plus probably a tad of padding-block).
  2. If the nav items still overflow their container, what should happen? Should they be clipped (overflow: hidden on the container), or should the container height grow (i.e. the container should be using min-height and not height)? Clipping might be better to conserve the design, but note that it’s a WCAG violation (loss of content).

  3. Prevent this situation altogether:

    • One option is to use the mobile layout earlier, e.g. for widths lower than 1000px instead of widths lower than 769px. (This might not be enough for some accessibility use cases, like text-only zoom.)
    • Another one is to implement a type of dynamic overflow menu, where all items that don’t fit in the navbar are moved to the overflow menu. This requires runtime JS, probably using IntersectionObserver.

System Info

System:
    OS: macOS 12.5.1
    CPU: (8) arm64 Apple M1
    Memory: 98.88 MB / 8.00 GB
    Shell: 3.5.1 - /opt/homebrew/bin/fish
  Binaries:
    Node: 16.17.0 - /opt/homebrew/opt/node@16/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 8.12.1 - ~/.npm-packages/bin/npm
  Browsers:
    Chrome: 105.0.5195.52
    Firefox Nightly: 106.0a1
    Safari: 15.6.1
  npmPackages:
    vitepress: ^1.0.0-alpha.13 => 1.0.0-alpha.13

Additional context

I can probably do a PR for the line-height part at least.

Validations

  • Follow our Code of Conduct
  • Read the docs.
  • Check that there isn’t already an issue that reports the same bug to avoid creating a duplicate.

Issue Analytics

  • State:closed
  • Created a year ago
  • Reactions:1
  • Comments:5 (1 by maintainers)

github_iconTop GitHub Comments

2reactions
fvschcommented, Nov 24, 2022

I disagree. IMO designs should be implemented to be resilient to not-so-extreme cases, in line with the spirit of responsive design (see also: defensive CSS. Oftentimes that’s necessary to meet WCAG AA requirements too.

The current design breaks easily with just ~3 items when those items are not short single word labels, and it currently breaks for two localizations of the Vite docs:

Spanish (the “…” menu is pushed to the right, outside of the viewport):

Screenshot of the header of the Vitest docs in the Spanish localization, at a width of 768px

Chinese (showing the line-height issue again, with label wrappings to two lines, with huge gaps between lines):

Screenshot of the header of the Vitest docs in the Chinese localization, at a width of 768px

0reactions
kiakingcommented, Oct 31, 2022

Thanks for the report and also the PR, but I really think the right approach to this is to “change the title & menu structures”.

There’s no way we can fit an unlimited number of menus. So, if it gets over-wrapped, users should consider grouping them into a dropdown menu or shortening the labels.

It is all about balance. For example, if you have lots of social links, you will get less space for menu items too.

Sometimes, the content has to adjust to the design. Or, even better, create own custom nav bar that can display the long texts 👍

Read more comments on GitHub >

github_iconTop Results From Across the Web

Disable Bootstrap 3 navbar going 2 rows in medium viewport ...
EDIT about how this works: this instructs the browser to collapse the navbar into a navicon if the media is smaller than some...
Read more >
Bootstrap 4 Navbar Breakpoint - Medium
When the viewport is wide enought, the menu items return to the horizontal Navbar. When there are no overflowing items, the dropdown menu...
Read more >
Responsive navbar overflowing · Issue #11539 · twbs/bootstrap
Would seem, that I use apropriate elements there so I have no clue. Example on the image. Will add html if it is...
Read more >
Navbar - Bootstrap
Documentation and examples for Bootstrap's powerful, responsive navigation header, the navbar. Includes support for branding, navigation, and more, ...
Read more >
Change the Bootstrap NavBar Breakpoint Example - Coderwall
By default, Bootstrap collapses (vertically stacks) the navbar at 768 pixels. You can easily change this threshold using a simple CSS media ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found