Hi,
We have a dropdown category menu that slides out under the content of the page. Tried numerous CSS tweaks but nothing I tried would work.
You can see a screen cap here: http://j.mp/2RgqkGw
This started last week, on v:9.7.2 and continues after upgrading to v:9.7.3
Thanks,
Kim
Also, you can visit https://www.rvtravel.com using Safari and see the problem when you hover over the category menu…
Hi,
Please try this custom css
.sf-menu li:hover ul, .sf-menu li.sfHover ul{
z-index: 999;
}
Set the code in Theme panel>Custom code> Custom css
Please clear all cache after you set the css.
Hope this will help you!
Thank you!
Entered CSS,
Cleared all Caches,
Purged OpCache,
Regenerated critical CSS (RocketCache)
Still dropdown menu appears under content elements on the page.
Please see screen cap from Safari Dev Tools here:
http://j.mp/2RkhIPa
This shows the error, the html sent to Safari and the CSS codes applicable to the menu when it’s dropped down.
(Note this is a problem ONLY in Safari, have not tried any other webkit browsers)
Thanks,
Kim
Hi,
Please replace the above custom css with this one
.sf-menu li:hover ul, .sf-menu li.sfHover ul{
z-index: 999;
-webkit-transform: translate3d(0,0,0);
}
Thank you!
And we have a winner!
I am getting a warning about also including -moz-transform and other browsers, I assume that since the issue only occurs in Safari that this is the only browser we need to apply it to here…
See screen cap of warning here: http://j.mp/2XNsHCS
Hi,
If you do not like that warning you can implement the code for other browses too and the warning will disappear.
.sf-menu li:hover ul, .sf-menu li.sfHover ul{
z-index: 999;
-webkit-transform: translate3d(0,0,0); /* WebKit */
-moz-transform: translate3d(0,0,0); /* Mozilla */
-o-transform: translate3d(0,0,0); /* Opera */
-ms-transform: translate3d(0,0,0); /* Internet Explorer */
transform: translate3d(0,0,0); /* CSS3 */
}
-> https://www.quackit.com/css/properties/webkit/css_-webkit-transform.cfm
Thank you!
