Description:
I added a Nav-Block which switches to mobile or modal view at 992px , the tablet or md breakpoint.
When I set the the inner window width exactly to 992px like the md breakpoint is defined, the modal is not working. At 991px and lower it works. At 993px and higher the desktop view shows up again.
The problem seems to be that the “is-modal” attribute in the element gets removed at 992px. Even though the media queries are still active at 992px.
I tracked it down to the “isModal()” Javascript function. In there it does a lower than (window.innerWidth < CCers.breakpoints.md) rather than lower equal than like the media queries do it with “max-width: 992px”.
Screenshots, screen recording, code snippet
Image of the state when the width is exactly 992px. Clicking the burger menu to open the modal does not work. You can see the invisible modal position by the light blue block in the image that shows up by selecting the element in the browser inspector:
Image of the breakpoints like they are defined in CCers and the Problem in the “isModal()” function:
…okay I can only make one media item in a post. Great!
Here are the code snippets:
var CCers = {
“ajaxurl”: “http://xyz.com/wp-admin/admin-ajax.php”,
“restBase”: “http://xyz.com/wp-json”,
“nonce”: “11c479b617”,
“logoutNonce”: “c907a1a10c”,
“loggedIn”: “”,
“cwiclyDefaults”: “false”,
“postID”: “281”,
“removeIDsClasses”: “true”,
“breakpoints”: {
“md”: 992,
“sm”: 576
}
};
e.prototype.isModal = function() {
if (“lg” === this.breakpoint)
return !0;
if (“md” === this.breakpoint) {
if (window.innerWidth < CCers.breakpoints.md)
return !0
} else if (“sm” === this.breakpoint && window.innerWidth < CCers.breakpoints.sm)
return !0
}
Environment info
- WordPress version: 6.3
- Cwicly Plugin version: 1.2.9.9.3
