Changeset 7031

Timestamp:

04/05/2018 04:22:26 AM (7 years ago)

Author:

coreymckrill

Message:

WP15 theme: Keep locale switcher in nav bar when it becomes sticky

Ensure that the nav bar, with all navigation items and the locale switcher,
remains intact and unchanged when scrolling down past the site header, which
causes the bar to become fixed at the top.

This also changes the layout of the nav bar on narrow screens so that the
locale switcher and the menu toggle button are on separate rows, with the
switcher first, allowing the toggled menu items to expand beneath.

Fixes #3545
Props coreymckrill, melchoyce, mcsf

Location:

sites/trunk/wp15.wordpress.net/public_html/content/themes/twentyseventeen-wp15

Files:

• assets (added)
• assets/js (added)
• assets/js/front-end.js (added)
• functions.php (modified) (1 diff)
• header.php (modified) (2 diffs)
• style.css (modified) (3 diffs)

sites/trunk/wp15.wordpress.net/public_html/content/themes/twentyseventeen-wp15/functions.php

@@ -52 +52 @@
     // Styles for locale switcher.
     wp_enqueue_style( 'select2' );
+
+    wp_enqueue_script(
+        'twentyseventeen-wp15-front-end',
+        get_theme_file_uri( '/assets/js/front-end.js' ),
+        array( 'jquery', 'twentyseventeen-global' ),
+        1,
+        true
+    );
 }
 

sites/trunk/wp15.wordpress.net/public_html/content/themes/twentyseventeen-wp15/header.php

@@ -23 +23 @@
 
             <?php if ( has_nav_menu( 'top' ) ) : ?>
+            <div class="navigation-top-container">
                 <div class="navigation-top">
                     <div class="wrap">
@@ -28 +29 @@
                     </div>
                 </div>
+
+                <?php Locales\locale_switcher(); ?>
+            </div>
             <?php endif; ?>
-
-            <?php Locales\locale_switcher(); ?>
         </header>
 

sites/trunk/wp15.wordpress.net/public_html/content/themes/twentyseventeen-wp15/style.css

@@ -162 +162 @@
 }
 
+.navigation-top-container {
+    background-color: white;
+    border-top: 1px solid #eee;
+    border-bottom: 1px solid #eee;
+}
+
+@supports ( display: grid ) {
+    .navigation-top-container {
+        grid-column: 1 / span 2;
+        grid-row: 2;
+        display: grid;
+        grid-template-columns: auto 3fr;
+    }
+
+    @media screen and ( min-width: 48em ) {
+        .navigation-top-container {
+            display: grid;
+            grid-template-columns: auto 300px;
+        }
+    }
+
+    .site-navigation-fixed.navigation-top-container {
+        position: fixed;
+        top: 0;
+        bottom: auto;
+        left: 0;
+        right: 0;
+        width: 100%;
+        z-index: 7;
+    }
+
+    .admin-bar .site-navigation-fixed.navigation-top-container {
+        top: 32px;
+    }
+}
+
 .navigation-top {
-    grid-column: 1;
+    grid-column: 1 / span 2;
     grid-row: 2;
     position: relative;
     z-index: 20;
-}
-
-.menu-toggle {
-    padding-top: 23px;
+    background: transparent;
+    border-top: 0;
+    border-bottom: 0;
+}
+
+@media screen and ( min-width: 48em ) {
+    .navigation-top {
+        grid-column: 1;
+        grid-row: 1;
+    }
+}
+
+.site-navigation-fixed.navigation-top {
+    position: relative;
+    left: auto;
+    right: auto;
+}
+
+.admin-bar .site-navigation-fixed.navigation-top {
+    top: auto;
 }
 
@@ -176 +228 @@
     position: absolute;
     width: 100vw;
-    border-bottom: 1px solid #eee;
-}
-
-.wp15-locale-switcher-container {
-    grid-column: 2;
-    grid-row: 2;
-    padding: 20px 30px 0 0;
-    background-color: white;
-    border-bottom: 1px solid #eee;
+}
+
+@supports ( display: grid ) {
+    .wp15-locale-switcher-container {
+        grid-column: 1 / span 2;
+        grid-row: 1;
+        display: grid;
+    }
+
+    #wp15-locale-switcher-form {
+        padding: 20px 0 0;
+        display: flex;
+        margin: 0 auto;
+    }
+
+    @media screen and ( min-width: 48em ) {
+        .wp15-locale-switcher-container {
+            grid-column: 2;
+            grid-row: 1;
+        }
+
+        #wp15-locale-switcher-form {
+            padding: 20px 30px 0 0;
+        }
+    }
 }
 
@@ -192 +260 @@
 
 .wp15-locale-switcher-container .dashicons-translation {
-    margin: 5px 10px;
+    margin: 5px 5px;
+}
+
+@media screen and ( min-width: 48em ) {
+    .wp15-locale-switcher-container .dashicons-translation {
+        margin: 5px 10px;
+    }
 }