Changeset 38909

Timestamp:

10/25/2016 04:50:49 PM (10 years ago)

Author:

karmatosed

Message:

Twenty Seventeen: Display scroll down arrow when no menu

This improves scrollability without a menu.

Props nnaimov, melchoyce, davidakennedy
Fixes #38392

Location:

trunk/src/wp-content/themes/twentyseventeen

Files:

• assets/js/global.js (modified) (2 diffs)
• style.css (modified) (3 diffs)
• template-parts/header/site-branding.php (modified) (1 diff)

trunk/src/wp-content/themes/twentyseventeen/assets/js/global.js

@@ -11 +11 @@
                         $navMenuItem = $navigation.find( '.menu-item' ),
                         $menuToggle = $navigation.find( '.menu-toggle' ),
-                        $menuScrollDown = $navigation.find( '.menu-scroll-down' ),
+                        $menuScrollDown = $body.find( '.menu-scroll-down' ),
                         $sidebar = $body.find( '#secondary' ),
                         $entryContent = $body.find( '.entry-content' ),
@@ -144 +144 @@
 
                 // Let's fire some JavaScript!
-                if ( 'true' === twentyseventeenScreenReaderText.has_navigation ) {
+                if ( $menuScrollDown.length ) {
 
                         /**

trunk/src/wp-content/themes/twentyseventeen/style.css

@@ -1465 +1465 @@
 /* Scroll down arrow */
 
-.navigation-top .menu-scroll-down {
+.site-header .menu-scroll-down {
         display: none;
 }
@@ -3515 +3515 @@
         }
 
-        .site-navigation-fixed.navigation-top .menu-scroll-down {
+        .site-navigation-fixed.site-header.menu-scroll-down {
                 display: none;
         }
@@ -3521 +3521 @@
         /* Scroll down arrow */
 
-        .navigation-top .menu-scroll-down {
-                color: #767676;
+        .site-header .menu-scroll-down {
                 display: block;
                 padding: 0.5em 0.5em 0.4em;
                 position: absolute;
                 right: 0;
-                top: 0.9em;
                 -webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */
                 -ms-transform: rotate(90deg); /* IE 9 */
                 transform: rotate(90deg);
+        }
+
+        .site-header .menu-scroll-down {
+                color: #fff;
+                top: 2em;
+        }
+
+        .site-header .navigation-top .menu-scroll-down {
+                color: #767676;
+                top: 0.9em;
         }
 

trunk/src/wp-content/themes/twentyseventeen/template-parts/header/site-branding.php

@@ -28 +28 @@
                 </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><!-- .site-branding -->