Excessive Header Size

[DanielHerr]

Summary

In many cases, the size of the header is excessive, taking up a third of the body size.

URL

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/super

Reproduction steps

1. View a page on MDN

Expected behavior

A minimal header footprint or one which isn't stickied as the page is scrolled down unless using large screens on desktop monitors.

Actual behavior

The header is present on phones and laptops and takes up too much space when trying to read content.

Device

Laptop, Phone

Browser

Chrome

Browser version

Stable

Operating system

Android, Chrome OS

Screenshot

Anything else?

https://github.com/orgs/mdn/discussions/680

Validations

• I have read the Community Participation Guidelines.
• I have verified that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• I have checked that this is a concrete bug. For Q&A open a GitHub Discussion.

[mirunacurtean]

I have managed to reproduce on Windows with Chrome on a 1084 × 722 , 996 × 722 to 895 × 722 browser viewport.

header.viewport.breakpoint.mov

@DanielHerr Thank you for raising an issue on MDN. Could you use https://whatismyviewport.com/ or a similar site to provide the viewport you are seeing this issue on mobile?

[DanielHerr]

Laptop: 1200 × 665
DPR: 2.00
Screen Size: 1200 × 800

Phone: 353 × 597
DPR: 3.06
Screen Size: 353 × 725

Regardless of the breakpoint related laptop issue, the header in general just takes up space while reading articles, so I would prefer if it was not sticky positioned or if the user had the option to control such.