diff --git src/wp-content/themes/twentyfifteen/style.css src/wp-content/themes/twentyfifteen/style.css index c97f019150..bfea5e64da 100644 --- src/wp-content/themes/twentyfifteen/style.css +++ src/wp-content/themes/twentyfifteen/style.css @@ -714,9 +714,12 @@ a:focus { margin-top: 0.5em; } -.no-js .main-navigation ul ul { +.no-js .secondary { display: block; } +.no-js button.secondary-toggle { + display:none; +} .dropdown-toggle { background-color: transparent; diff --git src/wp-content/themes/twentyfourteen/functions.php src/wp-content/themes/twentyfourteen/functions.php index a8797f91a3..84a8fdeec3 100644 --- src/wp-content/themes/twentyfourteen/functions.php +++ src/wp-content/themes/twentyfourteen/functions.php @@ -689,3 +689,15 @@ if ( ! function_exists( 'is_customize_preview' ) ) : return ( $wp_customize instanceof WP_Customize_Manager ) && $wp_customize->is_preview(); } endif; + +/** + * Handles JavaScript detection. + * + * Adds a `js` class to the root `` element when JavaScript is detected. + * + */ +function twentyfourteen_javascript_detection() { + echo "\n"; +} +add_action( 'wp_head', 'twentyfourteen_javascript_detection', 0 ); + diff --git src/wp-content/themes/twentyfourteen/header.php src/wp-content/themes/twentyfourteen/header.php index 21d1a546cb..0f364799d7 100644 --- src/wp-content/themes/twentyfourteen/header.php +++ src/wp-content/themes/twentyfourteen/header.php @@ -16,7 +16,7 @@ > -> + class="no-js"> diff --git src/wp-content/themes/twentyfourteen/style.css src/wp-content/themes/twentyfourteen/style.css index 5e09805b48..4365e78201 100644 --- src/wp-content/themes/twentyfourteen/style.css +++ src/wp-content/themes/twentyfourteen/style.css @@ -934,6 +934,10 @@ span + .edit-link:before, width: 48px; } +.no-js .search-toggle { + display:none; +} + .search-toggle:hover, .search-toggle.active { background-color: #41a62a; @@ -3274,6 +3278,22 @@ a.post-thumbnail:hover { top: 10px; } } +@media(max-width:782px) { + .no-js .primary-navigation button.menu-toggle { + display:none; + } + .no-js .primary-navigation ul { + display:block; + } + .no-js .primary-navigation ul#primary-menu { + padding-top:50px; + padding-bottom:25px; + } + .no-js .primary-navigation ul li { + width:100%; + clear: both; + } +} @media screen and (max-width: 400px) { diff --git src/wp-content/themes/twentythirteen/functions.php src/wp-content/themes/twentythirteen/functions.php index cf9718c76c..584ce5893c 100644 --- src/wp-content/themes/twentythirteen/functions.php +++ src/wp-content/themes/twentythirteen/functions.php @@ -825,3 +825,14 @@ if ( ! function_exists( 'wp_body_open' ) ) : do_action( 'wp_body_open' ); } endif; + +/** + * Handles JavaScript detection. + * + * Adds a `js` class to the root `` element when JavaScript is detected. + * + */ +function twentythirteen_javascript_detection() { + echo "\n"; +} +add_action( 'wp_head', 'twentythirteen_javascript_detection', 0 ); diff --git src/wp-content/themes/twentythirteen/header.php src/wp-content/themes/twentythirteen/header.php index 92c54e94ad..2795157179 100644 --- src/wp-content/themes/twentythirteen/header.php +++ src/wp-content/themes/twentythirteen/header.php @@ -16,7 +16,7 @@ > -> + class="no-js"> diff --git src/wp-content/themes/twentythirteen/style.css src/wp-content/themes/twentythirteen/style.css index 70f769b4ca..32213a28a7 100644 --- src/wp-content/themes/twentythirteen/style.css +++ src/wp-content/themes/twentythirteen/style.css @@ -3057,6 +3057,15 @@ footer.entry-meta { div.nav-menu > ul { display: none; } + .no-js .main-navigation button.menu-toggle { + display:none; + } + .no-js .main-navigation ul { + display:block; + } + .no-js .main-navigation ul li { + width:100%; + } #content .featured-gallery { padding-left: 24px; diff --git src/wp-content/themes/twentytwelve/functions.php src/wp-content/themes/twentytwelve/functions.php index 366514bd76..563d538e49 100644 --- src/wp-content/themes/twentytwelve/functions.php +++ src/wp-content/themes/twentytwelve/functions.php @@ -719,3 +719,14 @@ if ( ! function_exists( 'wp_body_open' ) ) : do_action( 'wp_body_open' ); } endif; + +/** + * Handles JavaScript detection. + * + * Adds a `js` class to the root `` element when JavaScript is detected. + * + */ +function twentytwelve_javascript_detection() { + echo "\n"; +} +add_action( 'wp_head', 'twentytwelve_javascript_detection', 0 ); diff --git src/wp-content/themes/twentytwelve/header.php src/wp-content/themes/twentytwelve/header.php index 2888cd8ee3..a694e158ef 100644 --- src/wp-content/themes/twentytwelve/header.php +++ src/wp-content/themes/twentytwelve/header.php @@ -16,7 +16,7 @@ > -> + class="no-js"> diff --git src/wp-content/themes/twentytwelve/style.css src/wp-content/themes/twentytwelve/style.css index 98abf2bf27..3b7601d1c0 100644 --- src/wp-content/themes/twentytwelve/style.css +++ src/wp-content/themes/twentytwelve/style.css @@ -613,6 +613,12 @@ a:hover { .menu-toggle { display: inline-block; } +.no-js .main-navigation button.menu-toggle { + display:none; +} +.no-js .main-navigation ul { + display:block; +} /* Banner */ section[role="banner"] { diff --git src/wp-content/themes/twentytwenty/style.css src/wp-content/themes/twentytwenty/style.css index 8d902c5bc6..3708366b8f 100644 --- src/wp-content/themes/twentytwenty/style.css +++ src/wp-content/themes/twentytwenty/style.css @@ -1469,10 +1469,21 @@ body:not(.enable-search-modal) .site-logo img { /* Header Navigation ------------------------- */ -.header-navigation-wrapper { +.js .header-navigation-wrapper { display: none; } +.no-js .header-navigation-wrapper nav.primary-menu-wrapper ul.primary-menu li, +.no-js .header-navigation-wrapper nav.primary-menu-wrapper ul.primary-menu li a { + text-align: center; + width:100%; + padding:0px; +} + +.no-js .header-navigation-wrapper nav.primary-menu-wrapper ul.primary-menu { + padding-top:50px; +} + /* Header Toggles ---------------------------- */ .header-toggles { @@ -1486,6 +1497,10 @@ body:not(.enable-search-modal) .site-logo img { padding: 0 2rem; } +.no-js .header-inner .toggle { + display:none; +} + .header-inner .toggle svg { display: block; position: relative; @@ -1537,6 +1552,10 @@ body:not(.enable-search-modal) .site-logo img { top: 0; } +.no-js .search-toggle { + display:none; +} + .search-toggle .toggle-icon, .search-toggle svg { height: 2.5rem; @@ -1566,10 +1585,6 @@ body:not(.enable-search-modal) .site-logo img { /* Primary Menu ---------------------------- */ -.primary-menu-wrapper { - display: none; -} - ul.primary-menu { display: flex; font-size: 1.8rem; @@ -1627,6 +1642,9 @@ ul.primary-menu { right: -0.5rem; top: calc(50% - 0.4rem); } +.no-js .primary-menu > li > .icon { + display:none; +} .primary-menu a { color: inherit; @@ -5702,6 +5720,20 @@ a.to-the-top > * { display: flex; } + .js .header-navigation-wrapper { + display:flex; + } + + .no-js .header-navigation-wrapper nav.primary-menu-wrapper ul.primary-menu li, .no-js .header-navigation-wrapper nav.primary-menu-wrapper ul.primary-menu li a { + width:auto; + text-align: inherit; + padding:inherit; + } + + .no-js .header-navigation-wrapper nav.primary-menu-wrapper ul.primary-menu { + padding-top:0px; + } + .primary-menu-wrapper { display: block; width: 100%;