Make WordPress Core

Opened 7 months ago

Last modified 3 months ago

#42598 new defect (bug)

Twenty Seventeen: Sticky header offset issue

Reported by: anevins Owned by:
Milestone: 5.0 Priority: normal
Severity: normal Version:
Component: Bundled Theme Keywords: has-patch needs-testing
Focuses: javascript Cc:


Theme: Twenty Seventeen Version: 1.3+ (not tested below 1.3)

The theme has an option to make the header/ menu "sticky" or fixed position.

The theme also has a function that handles the position of the viewport, so that the menu does not sit on top of content navigated from internal links.

For example if you were to jump to a section of the page using '#about' the theme's JS would fire and amend the viewport in relation to the height of the fixed menu.

The bug If a link goes to a section of content another page the theme's JS that amends the viewport no longer works.

I've tried debugging this from the support forums on someone's website and I think the issue is related to the order in which the JS fires; 1) When the page loads the header height is not fully calculated; 2) The theme's JS then moves the viewport to fix the sticky menu overlap, which uses the position of the scrollbar as reference; 3) The theme's JS then applies a margin-bottom on the header, causing a shift in the scrolling position 4) The result is that the offset is incorrect and the fixed menu sits on top of the content.

Steps to replicate:

  • Enable the sticky header
  • Create a "Continue reading" link that goes to a new page (with a hash to the section)
  • Press that "Continue reading" link to see the problem in the linked page

Attachments (2)

42598.diff (1.2 KB) - added by jasonlcrane 4 months ago.
42598.2.diff (895 bytes) - added by jasonlcrane 3 months ago.
Update to conform to WordPress' JavaScript Coding Standards, JSHint checks passed

Download all attachments as: .zip

Change History (8)

This ticket was mentioned in Slack in #core-customize by jeffpaul. View the logs.

7 months ago

#2 @jbpaul17
7 months ago

  • Milestone changed from Awaiting Review to 5.0

Per today's 4.9 bug triage, we'll look to resolve this during the 5.0 release cycle.

4 months ago

#3 @jasonlcrane
4 months ago

  • Keywords has-patch added

I understand the issue to be this:

  1. User is on Page A.
  2. User selects a link that goes to Page B, and the href in that link also contains a hash for a specific element on Page B. For example, "/page-b#comments".
  3. Upon loading, Page B automatically scrolls to the element with the ID of "comments", but because of the fixed navigation, the top part of the "comments" section is covered by the navigation.

The patch I added fixes this issue in my testing.

#4 @SergeyBiryukov
4 months ago

  • Component changed from Themes to Bundled Theme

#5 @jasonlcrane
3 months ago

  • Keywords needs-testing added

This ticket was mentioned in Slack in #core by jasonlcrane. View the logs.

3 months ago

3 months ago

Update to conform to WordPress' JavaScript Coding Standards, JSHint checks passed

Note: See TracTickets for help on using tickets.