- This topic has 17 replies, 4 voices, and was last updated 1 year, 4 months ago by
.
-
Posts
-
Hey team! I’m seeing an issue with the mobile header/off-canvas menu on my mobile device where there are some odd behaviors:
- Tapping the hamburger menu doesn’t trigger the off-canvas menu reliably–multiple taps are required
- Once the hamburger menu actually triggers, the off-canvas menu doesn’t even show up. The overlay is empty.
- The search icon does not actually engage any action other than highlighting the icon
All of these behaviors work properly within the Customizer when switching to the mobile viewport. The buttons work properly, the search icon returns the menu, and the off-canvas menu appears as expected.
https://www.webpagescreenshot.info/#v2=uQgD7iV3L
In an incognito window, I opened the inspector and hit the icon to open the device dropdown for emulating a mobile device and received a weird combination of the two, however. The search icon reveals the search window, but the hamburger menu reveals the same blank overlay as on the physical device.
Here’s what I’ve checked already:
- The desired menu is selected for both the Primary and the Off-Canvas spots in the menu settings
- Mobile breakpoint is default at 768px
- No widgets are in the off-canvas widget space
I tested on a non-incognito window with the dev tools and without being filtered via Ezoic the menu and search bar work properly in a Chrome tab emulating the mobile device.
I tried excluding these four scripts in my Ezoic console:
offside.js
offside.min.js
sticky.js
sticky.min.jsIt seems to have fixed the search icon behavior on both the dev tools emulation and the physical device, but the menu is still not working properly, but now it’s not even displaying the off-canvas overlay.
I disabled Ezoic completely, refreshed everything, and still not working, so it seems like that’s not part of the issue.
Anything else I can try? Definitely out of ideas haha. Thanks!
Customer Support
Hi Lou,
Can you try disabling all plugins except GP Premium to check if a plugin is messing with the scripts?
Some of the scripts on your site has “ez-screx=”true” attribute and I’m not exactly sure if its related. It’s best to check and do process of elimination for conflicts just to be sure.
Let us know.
Hi Elvin,
I’ve disabled all but these plugins:
https://www.webpagescreenshot.info/#v2=aEggkPQCx
I also disabled Ezoic on their routing side and cleared all caches, no change.
I’ll leave the site as-is for a short moment, but I really can’t leave it like this for long.
I’ve checked the console of your site and it returns this:
https://share.getcloudapp.com/nOuPwx4WThis doesn’t happen by default. A plugin or a cache (from plugin or server-sided caching) must be messing with it.
I’ll leave the site as-is for a short moment, but I really can’t leave it like this for long.
Can you make a staging site for it so we can do away with it without worry? It’s good practice for site debugging/development. 🙂
Yeah, I was seeing that also. I’ve narrowed it down to appearing to be Ezoic’s speed optimization stuff delaying/blocking those scripts.
I was able to exclude delays for /wp-content/plugins/gp-premium/menu-plus/functions/js/offside.min.js?ver=2.0.2 and /wp-content/plugins/gp-premium/menu-plus/functions/js/sticky.min.js?ver=2.0.2, but I’m still seeing the error in dev tools:
Uncaught ReferenceError: jQuery is not defined
at sticky.min.js?ver=2.0.2:formatted:244I can’t find anything else that I should be delaying to open up this other definition.
So, the canvas appears to be loading, but there’s no menu showing at this point.
I believe I’ve found another part of the issue. I started going through the Ezoic speed optimization stuff and toggled some main sections until I found a change in behavior. Turns out that the CSS > Remove Unused CSS setting will actually block the menu from loading in the canvas.
https://monosnap.com/file/ETn7ZrFwYuxrXUWFFhtHE6UVbtArTz
Turning this off fixes the menu not showing up part of the error, but the sticky.min.js is still throwing an error:
Looks like there’s a chunk of CSS that’s being removed as “unused”… lmao okay…
.offside–left.is-open, .offside-js–is-left .offside-sliding-element {
transform: translate3d(265px,0,0);
}I’ve added this in as custom CSS via Ezoic’s custom CSS override and it now seems to work. But I really don’t want to rely on this as a fix… Is there a way to perhaps get it to, like, not be seen as “unused”?
And I still am not sure why that sticky.min.js still throwing an error haha.
That CSS is perceived as unused because it’s actually unused on page load. It is only used when triggered.
That specific CSS basically pushes the slideout menu in view onclick of the hamburger button. (
.is-openclass toggle)I’ve not sure if Ezoic has an option to exclude stylesheets but can you exclude the stylesheet that contains that as well?
And I still am not sure why that sticky.min.js still throwing an error haha.
It’s quite difficult to determine as we’re not sure as well how Ezoic or any optimization plugin you use do things (Ezoic seems more complicated than say, WP Rocket or Autoptimize). We suggest contacting the plugin’s support/developer about this.
I haven’t seen a way to exclude stylesheets yet, but I’ll hit them up and see if there’s a way to do it. What specific stylesheets and functions do you think I should be looking to exclude in total?
I haven’t seen a way to exclude stylesheets yet, but I’ll hit them up and see if there’s a way to do it. What specific stylesheets and functions do you think I should be looking to exclude in total?
Ideally, all the assets of GeneratePress and GP Premium. Or at least the JS your site uses. (you can skip the woocommerce JS within GP Premium if you’re not using it.)
Hey Lou, what did you find out from Ezoic? I am struggling with this as well.
Hey Walt, I actually didn’t even chase anything further down with Ezoic on this–I was pretty aggravated with some other open support tickets with them and somewhat resolved it on my own with the Leap optimization settings.
From the dashboard, go to Speed (Leap) > Optimization Settings > click the Advanced Settings link in the Script Execution section > click Exclusion Rules in the Script Delay section and add the scripts into the exception list. To be honest, I don’t recall which specific one(s) did the trick, but I left it the way it is, so I’m sure I had a reason for it lol.
Here’s what mine looks like:
https://monosnap.com/file/x7oRtryvwcS8IyQ5d3AsIV5PIdQ9sL
For copy/paste ease, here’s the ones I added:
/wp-content/plugins/gp-premium/menu-plus/functions/js/sticky.min.js
/wp-content/plugins/gp-premium/menu-plus/functions/js/offside.js
/wp-content/plugins/gp-premium/menu-plus/functions/js/offside.min.js
/wp-content/plugins/gp-premium/menu-plus/functions/js/sticky.js
var offSide = {“side”:”left”};
generatepressNavSearchI also have the Load jQuery from CDN turned off in my Script Execution Advanced Settings. Again, can’t recall if this was required or not, but it may be worth a test for you. I checked my own changelog notes and I don’t have anything as to why I did any of these (lmao super useful changelog, right?), so I can’t be 100% certain on any of it. But it’s a good place to start.
Hope this helps!
Thanks Lou – that is very helpful! I will give adding those scripts a shot on my Ezoic Leap as well.
I opened a case with them about a month ago on this, but never got anywhere..
thanks again!
Thanks for sharing it with us @Lou, glad you got it working. 😀
@Walt,
I opened a case with them about a month ago on this, but never got anywhere..
Yeah, I think we get this one from time to time. I’d consider checking on other communities for this as well. (stackoverflow is super helpful).
Following back up on this.. I found out that having the following Ezoic Optimize features enabled broke my mobile menus.
CSS -> Remove Unused CSS
Disable the Remove Unused CSS section and save your changes. All the other CSS optimization settings can stay on. After doing this, my mobile menus worked instantly.
- You must be logged in to reply to this topic.