Mobile nav drawer clips site search and "Get Started" out of reach

Open Beginner friendly
#400 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
82/100
Issue type
Bug
Clarity
Clearly specified
Activity status
Quiet
Tech stack
css
Domain
frontend, web-dev

Research direction

Start in assets/style/sections/header.css around lines 175 and 181 and inspect the mobile drawer at a 390 px viewport. Make the search box and "Get Started" button reachable below the six nav links, then verify the drawer no longer clips those items; the related layout.css and learn-and-dev.css issues are separate scope.

Written by the indexing model from the issue text.

Description

On narrow viewports the open navigation drawer is given a fixed height with hidden overflow, which clips the last two items out of view.

assets/style/sections/header.css:

:175    overflow: hidden;
:181    height: 21rem;

At 390 px the six nav links fill that 21rem exactly — the last link ends at y=463 and the drawer clips at y=472. The search box (y=479–504) and the "Get Started" button (y=520–568) both render below the clip.

Both elements are present in the DOM and are not reachable by scrolling, because the overflow is hidden rather than scrollable.

Impact

Mobile users have no access to site search and no route to the installation instructions from the navigation. Given that /install is consistently among the top landing pages site-wide, losing the "Get Started" path on mobile is a real cost.

Suggested fix

Remove the hardcoded height: 21rem and let the drawer size to its content, or set overflow-y: auto so the remaining items stay reachable. The former is preferable — there is no apparent reason the drawer needs a fixed height.

Two related clipping issues in the same area

While these are separate rules, they share a cause (fixed sizing plus hidden overflow on small screens) and might be worth fixing together:

  • assets/style/base/layout.css:32 — .content { overflow: hidden } clips roughly 133 px off the DESeq2 "Details" and "Package Archives" tables at 390 px, with no scrollbar.
  • assets/style/pages/learn-and-dev.css:171-173 — .page-container * { font-size: 1rem } flattens the type scale on small screens. On /help/, h2 drops from 32 px to 16 px and p from 20 px to 16 px, making headings and body text typographically identical.

Filed from a site audit (2026-07-25/26); line numbers re-verified against devel before filing.

Dominant language
HTML
Stars
41
Forks
51
Avg merge
1h 43m
Merged PRs (30d)
2

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from Bioconductor/bioconductor.org

All issues in Bioconductor/bioconductor.org

Similar issues

More Web Dev issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.