Twenty Seventeen: Display scroll down arrow when no menu

This improves scrollability without a menu.

Props nnaimov, melchoyce, davidakennedy
Fixes #38392


Built from https://develop.svn.wordpress.org/trunk@38909


git-svn-id: http://core.svn.wordpress.org/trunk@38852 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Tammie Lister 2016-10-25 16:51:35 +00:00
parent a62d04afd6
commit 67dbadd476
4 changed files with 20 additions and 8 deletions

View File

@ -10,7 +10,7 @@
$navWrap = $navigation.find( '.wrap' ), $navWrap = $navigation.find( '.wrap' ),
$navMenuItem = $navigation.find( '.menu-item' ), $navMenuItem = $navigation.find( '.menu-item' ),
$menuToggle = $navigation.find( '.menu-toggle' ), $menuToggle = $navigation.find( '.menu-toggle' ),
$menuScrollDown = $navigation.find( '.menu-scroll-down' ), $menuScrollDown = $body.find( '.menu-scroll-down' ),
$sidebar = $body.find( '#secondary' ), $sidebar = $body.find( '#secondary' ),
$entryContent = $body.find( '.entry-content' ), $entryContent = $body.find( '.entry-content' ),
$formatQuote = $body.find( '.format-quote blockquote' ), $formatQuote = $body.find( '.format-quote blockquote' ),
@ -143,7 +143,7 @@
$( document ).ready( function() { $( document ).ready( function() {
// Let's fire some JavaScript! // Let's fire some JavaScript!
if ( 'true' === twentyseventeenScreenReaderText.has_navigation ) { if ( $menuScrollDown.length ) {
/** /**
* 'Scroll Down' arrow in menu area * 'Scroll Down' arrow in menu area

View File

@ -1464,7 +1464,7 @@ a:hover .nav-title,
/* Scroll down arrow */ /* Scroll down arrow */
.navigation-top .menu-scroll-down { .site-header .menu-scroll-down {
display: none; display: none;
} }
@ -3514,24 +3514,32 @@ article.panel-placeholder {
display: none; display: none;
} }
.site-navigation-fixed.navigation-top .menu-scroll-down { .site-navigation-fixed.site-header.menu-scroll-down {
display: none; display: none;
} }
/* Scroll down arrow */ /* Scroll down arrow */
.navigation-top .menu-scroll-down { .site-header .menu-scroll-down {
color: #767676;
display: block; display: block;
padding: 0.5em 0.5em 0.4em; padding: 0.5em 0.5em 0.4em;
position: absolute; position: absolute;
right: 0; right: 0;
top: 0.9em;
-webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */ -webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */
-ms-transform: rotate(90deg); /* IE 9 */ -ms-transform: rotate(90deg); /* IE 9 */
transform: rotate(90deg); transform: rotate(90deg);
} }
.site-header .menu-scroll-down {
color: #fff;
top: 2em;
}
.site-header .navigation-top .menu-scroll-down {
color: #767676;
top: 0.9em;
}
.menu-scroll-down:focus { .menu-scroll-down:focus {
outline: thin dotted; outline: thin dotted;
} }

View File

@ -27,5 +27,9 @@
<?php endif; ?> <?php endif; ?>
</div><!-- .site-branding-text --> </div><!-- .site-branding-text -->
<?php if ( ( twentyseventeen_is_frontpage() || ( is_home() && is_front_page() ) ) && ! has_nav_menu( 'top' ) ) : ?>
<a href="#content" class="menu-scroll-down"><?php echo twentyseventeen_get_svg( array( 'icon' => 'next' ) ); ?><span class="screen-reader-text"><?php _e( 'Scroll Down', 'twentyseventeen' ); ?></span></a>
<?php endif; ?>
</div><!-- .wrap --> </div><!-- .wrap -->
</div><!-- .site-branding --> </div><!-- .site-branding -->

View File

@ -4,7 +4,7 @@
* *
* @global string $wp_version * @global string $wp_version
*/ */
$wp_version = '4.7-alpha-38908'; $wp_version = '4.7-alpha-38909';
/** /**
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema. * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.