My Community Pro Theme Setup

  1. Home
  2. Docs
  3. My Community Pro Theme Setup
  4. Extras
  5. Fix CLS Issues

Fix CLS Issues

If your menu is opening on mobile, and you get CLS scores over 0.1, you can try this.

1. Install and Activate this plugin - Genesis JS / No JS - https://wordpress.org/plugins/genesis-js-no-js/
Don't worry that it says it hasn't been tested. The code is good; they just didn't resubmit the the WordPress repository.

2. Then add the following CSS to Appearance > Customize > Additional CSS

/* CLS Menu */
.js .nav-primary {
	display: none;
	position: relative;
}
.site-header {
       	height: 60px;
} /* this depends on your site */

@media only screen and (min-width: 960px) {

	.js .nav-primary {
		display: block;
	}
	.site-header {
       	   height: auto;
	}
}

Note that the number 60px is the height of your site-header, so you may need to try other numbers or put in a support ticket.

Use this test site, as it is more reliable than others.

WebPageTest