Changeset 11263 for trunk/src/bp-templates/bp-legacy/css/twentysixteen.scss

Timestamp:

12/02/2016 09:42:18 AM (8 years ago)

Author:

hnla

Message:

Correct twentysixteen .no-js class conflict with BP's version of same class on body element

Commit adds a ruleset specific to twntysixteen to hide the onclick dropdown mobile menu on page load.

Twentysixteen adds a hardcoded class to the html element & changes class if JS active scripted in the 'head'; BP runs similar but on body el & changes no-js class on DOM fully loaded.

Menu remains in view after clicking due to 2016 updating js class early and BP lagging behind.

Ruleset targets body element if it has a class .no-js and it's parent has class .js thus we only run if JS active and for initial page load sequence.

See #7314

File:

• trunk/src/bp-templates/bp-legacy/css/twentysixteen.scss (modified) (1 diff)

trunk/src/bp-templates/bp-legacy/css/twentysixteen.scss

@@ -236 +236 @@
 */
 
-
+// A conflict between BP's body.no-js being removed only
+// when the DOM is fully loaded & Twentysixteens hardcoded
+// class on the html el & scripting in head at start of DOM
+// causes mobile menu to stay opened too long.
+// This ruleset hides menu if html.js (2016 JS has kicked in) but BP still
+// rendering body.no-js before it's own JS removal kicks in.
+// See trac ticket https://buddypress.trac.wordpress.org/ticket/7314
+
+/**
+* Corrective measure to deal with 2016 / BP handling of no-js
+* classes - hide menu if BP still showing 'no-js'.
+*/
+
+@media screen and (max-width: 905px) {
+
+    html.js {
+
+        body.no-js {
+
+            .site-header-menu {
+                display: none;
+            }
+        }
+    }
+}
 
 .buddypress {