Twenty Seventeen: Scroll down arrow in fixed main navigation

[LittleBigThing]

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'.

[melchoyce]

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

[davidakennedy]

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

[karmatosed]

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