- Overlay of dropdown is blocking the main navigation in Chrome and Safari
Hi,
To fix it, you can add this in Header > CSS
.hm5 .x-dropdown {
top: 58px;
}
Hope that helps.
why do I even need this additional piece of code if I did not need it before?
Hello There,
You may remove the code since it is not necessarily needed. I have logged to your site and cleared the WP Rocket cache as well as the WP Engine cache. After then I tested your site again and this is what I’ve got:
You must understand that every once in a while, you will be experiencing caching issue because you are using a caching and have minified JS and CSS files. The JS and CSS files is already in minified format. Minifying it again could create issues especially when these files is cached with several cached levels.
You may temporarily deactivate WP Rocket so that you can see the difference.
I understand caching issues and that things need to be cleared from time to time.
You may temporarily deactivate WP Rocket so that you can see the difference.
I have cleared my cache and still not seeing what you are seeing… I can only see it working correctly when I’m logged into the WP backend…
what I am seeing:
How to trouble shoot this?
Hi @paullalley,
I confirm that it is not working well in the live site however inside your site the menu is working fine. You could try testing for plugin conflict. You can do this by deactivating all third party plugins, and seeing if the problem remains. If it’s fixed, you’ll know a plugin caused the problem, and you can narrow down which one by reactivating them one at a time.
Let us know how it goes!
Thanks.
nico, this is epically frustrating now… I already tried deactivating plugins, with no effect. The fastest way would be for you to login to the site and take a look?
Hi There,
Yes, that is an option.
You also could try adding the CSS suggested by Paul.
Thank you
I Have tried adding Paul’s CSS and it resulted in nothing. Also, I have numerous headers so the solution needs to work across all headers on the different pages.
Again, can someone login to see how to fix this as this is now urgent. I should not need to add CSS to something that should work without effort.
Hi There,
Sorry if I was not clear.
We can login on your website but you need to provide the credentials.
Thank you
I have added a secure note in this post. While you are in there, the sticky header navigation is no longer working also as a result of the recent update. Can you also take a look please.
Thanks a million!
Hi there,
I have checked your site and this seems to be an issue caused by WP Rocket.
Try going to Settings > WP Rocket and disable Combine files: for the CSS and Javascript. Save and clear the cache and check the site and the dropdown menu will display back to normal.
Kindly also take into consideration the warning by the WP Rocket plugin which is Warning: Deactivate if you notice any visually broken items on your website. and to test thoroughly before enabling some options by the plugin.
Hope this helps.
Thanks. Turning off CSS optimisation did the trick.
So it seems WP Rocket and Pro are not completely compatible. Are you working on making it 100% compatible with WP Rocket?
Hi,
It just needs to be configured correctly.
For example for the css minification/optimization you need to exclude the theme’s css files as those files are already minified. No need to minify it again using a plugin.
You can try adding this in exclude css
/wp-content/themes/pro/(.*).css
Hope that helps
Hi @paullalley,
WP Rocket or any caching / optimization plugin could work with Pro. The question is not compatibility but how you setup / configure your optimizations. In X and Pro, a general minified CSS is enqueued and is outputted as
<link rel='stylesheet' id='x-stack-css' href='http://xpro.dev/wp-content/themes/pro/framework/css/dist/site/stacks/integrity-light.css?ver=1.2.6' type='text/css' media='all' />
Next to that is your child theme’s CSS
<link rel='stylesheet' id='x-child-css' href='http://xpro.dev/wp-content/themes/pro-child/style.css?ver=1.2.6' type='text/css' media='all' />
Then the Theme Options’ and the Builder’s CSS are outputted as combined and minified inline CSS. With this, you don’t need third party minification out of the box.
I do not mean that you should not use minification though because other plugins does not minify their resources. What I’m saying is, you should know to exclude or include enqueued files and inline CSS using your optimization plugin. To do that, you should read the plugin’s documentation or contact their support. Here’s a link to troubleshooting WP Rocket minification issues.
I’ve seen users in the X theme users FB group who uses WP Rocket. You might want to search them out and try to reach them for their experience.
Thanks.
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.