WordPress.org

Make WordPress Core

#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:

Description

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 12 months 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
12 months 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.

@davidakennedy
12 months ago

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

#2 @davidakennedy
12 months ago

  • Keywords has-patch needs-testing added

#3 @karmatosed
12 months 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.