Make WordPress Core

Opened 5 years ago

Closed 5 years ago

#38555 closed defect (bug) (fixed)

Twenty Seventeen: Scroll down arrow in fixed main navigation

Reported by: LittleBigThing Owned by: karmatosed
Milestone: 4.7 Priority: normal
Severity: normal Version: 4.7
Component: Bundled Theme Keywords: has-patch needs-testing
Focuses: ui, accessibility, javascript, template Cc:


The top, main navigation of the Twenty Seventeen theme has a down-arrow on wide screens. It appears on the front and blog page when a large (= heigh) header image/video is shown.

The arrow is used to make clear that there is more on the page: when clicked the page scrolls to the content, moving the main navigation - initially on the bottom of the page - to the top.

When the user scrolls further, the main navigation becomes fixed at the top. The arrow remains in the navigation and functions still the same way as described above. So, when the user is, for example, at the bottom of the page, there is still a down-arrow present, scrolling to the top when clicked. This is kind of unexpected.

A solution could be to:

  • change the arrow to an up-arrow or
  • remove/hide the arrow

when the main navigation is fixed.

The easiest way could be transforming the arrow to point upwards when the navigation is fixed:

.site-navigation-fixed .icon-next {
    transform: rotate(180deg);
    /* transition: transform 0.2s ease-in-out; */

This has the advantage above removing the arrow that it can be used as a 'scroll-to-top' button.

There is also a screen reader text for the arrow: 'Scroll down'. This should then be changed, too. Something like 'Scroll to content start'.

Attachments (1)

38555.1.patch (443 bytes) - added by davidakennedy 5 years ago.
Fixes CSS selector to hide scroll down arrow properly when fixed navigation kicks in.

Download all attachments as: .zip

Change History (4)

#1 @melchoyce
5 years ago

  • Milestone changed from Awaiting Review to 4.7
  • Type changed from enhancement to defect (bug)

Thanks @LittleBigThing! Looks like this is a regression — the arrow should disappear once the menu sticks. We'll look at fixing this soon.

5 years ago

Fixes CSS selector to hide scroll down arrow properly when fixed navigation kicks in.

#2 @davidakennedy
5 years ago

  • Keywords has-patch needs-testing added

#3 @karmatosed
5 years ago

  • Owner set to karmatosed
  • Resolution set to fixed
  • Status changed from new to closed

In 39004:

Twenty Seventeen: Fixes unexpected behaviour of scroll down arrow

This ensures the arrorw disappears once the top menu sticks.

Props LittleBigThing, davidakennedy
Fixes #38555

Note: See TracTickets for help on using tickets.