WordPress.org

Making WordPress.org

Changeset 7031


Ignore:
Timestamp:
04/05/2018 04:22:26 AM (18 months 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:
3 added
3 edited

Legend:

Unmodified
Added
Removed
  • sites/trunk/wp15.wordpress.net/public_html/content/themes/twentyseventeen-wp15/functions.php

    r7013 r7031  
    5252    // Styles for locale switcher.
    5353    wp_enqueue_style( 'select2' );
     54
     55    wp_enqueue_script(
     56        'twentyseventeen-wp15-front-end',
     57        get_theme_file_uri( '/assets/js/front-end.js' ),
     58        array( 'jquery', 'twentyseventeen-global' ),
     59        1,
     60        true
     61    );
    5462}
    5563
  • sites/trunk/wp15.wordpress.net/public_html/content/themes/twentyseventeen-wp15/header.php

    r6992 r7031  
    2323
    2424            <?php if ( has_nav_menu( 'top' ) ) : ?>
     25            <div class="navigation-top-container">
    2526                <div class="navigation-top">
    2627                    <div class="wrap">
     
    2829                    </div>
    2930                </div>
     31
     32                <?php Locales\locale_switcher(); ?>
     33            </div>
    3034            <?php endif; ?>
    31 
    32             <?php Locales\locale_switcher(); ?>
    3335        </header>
    3436
  • sites/trunk/wp15.wordpress.net/public_html/content/themes/twentyseventeen-wp15/style.css

    r7019 r7031  
    162162}
    163163
     164.navigation-top-container {
     165    background-color: white;
     166    border-top: 1px solid #eee;
     167    border-bottom: 1px solid #eee;
     168}
     169
     170@supports ( display: grid ) {
     171    .navigation-top-container {
     172        grid-column: 1 / span 2;
     173        grid-row: 2;
     174        display: grid;
     175        grid-template-columns: auto 3fr;
     176    }
     177
     178    @media screen and ( min-width: 48em ) {
     179        .navigation-top-container {
     180            display: grid;
     181            grid-template-columns: auto 300px;
     182        }
     183    }
     184
     185    .site-navigation-fixed.navigation-top-container {
     186        position: fixed;
     187        top: 0;
     188        bottom: auto;
     189        left: 0;
     190        right: 0;
     191        width: 100%;
     192        z-index: 7;
     193    }
     194
     195    .admin-bar .site-navigation-fixed.navigation-top-container {
     196        top: 32px;
     197    }
     198}
     199
    164200.navigation-top {
    165     grid-column: 1;
     201    grid-column: 1 / span 2;
    166202    grid-row: 2;
    167203    position: relative;
    168204    z-index: 20;
    169 }
    170 
    171 .menu-toggle {
    172     padding-top: 23px;
     205    background: transparent;
     206    border-top: 0;
     207    border-bottom: 0;
     208}
     209
     210@media screen and ( min-width: 48em ) {
     211    .navigation-top {
     212        grid-column: 1;
     213        grid-row: 1;
     214    }
     215}
     216
     217.site-navigation-fixed.navigation-top {
     218    position: relative;
     219    left: auto;
     220    right: auto;
     221}
     222
     223.admin-bar .site-navigation-fixed.navigation-top {
     224    top: auto;
    173225}
    174226
     
    176228    position: absolute;
    177229    width: 100vw;
    178     border-bottom: 1px solid #eee;
    179 }
    180 
    181 .wp15-locale-switcher-container {
    182     grid-column: 2;
    183     grid-row: 2;
    184     padding: 20px 30px 0 0;
    185     background-color: white;
    186     border-bottom: 1px solid #eee;
     230}
     231
     232@supports ( display: grid ) {
     233    .wp15-locale-switcher-container {
     234        grid-column: 1 / span 2;
     235        grid-row: 1;
     236        display: grid;
     237    }
     238
     239    #wp15-locale-switcher-form {
     240        padding: 20px 0 0;
     241        display: flex;
     242        margin: 0 auto;
     243    }
     244
     245    @media screen and ( min-width: 48em ) {
     246        .wp15-locale-switcher-container {
     247            grid-column: 2;
     248            grid-row: 1;
     249        }
     250
     251        #wp15-locale-switcher-form {
     252            padding: 20px 30px 0 0;
     253        }
     254    }
    187255}
    188256
     
    192260
    193261.wp15-locale-switcher-container .dashicons-translation {
    194     margin: 5px 10px;
     262    margin: 5px 5px;
     263}
     264
     265@media screen and ( min-width: 48em ) {
     266    .wp15-locale-switcher-container .dashicons-translation {
     267        margin: 5px 10px;
     268    }
    195269}
    196270
Note: See TracChangeset for help on using the changeset viewer.