Docs

[irudhayaraj]

I have been checking the site continuously as i develop the layout on the website: http://anchorpointdesigns.com/Scuf/

Suddenly yesterday the menu font weight and the shopping cart icon format has changed only in safari. I have not changed anything on the nav bar lately. Its ok in chrome and mozilla but safari seem to be off. I want the same as chrome on safari as well. I tried to reset safari but doesnt seem to work.

[irudhayaraj]

attached a screen shot. The top one is from chrome which is the correct one and the bottom one is from safari.

[irudhayaraj]

Added the following code in customiser and now the font weight seem to fixed for the navigation item but the shopping cart is still an issue.

.x-navbar {
-webkit-transform: none !important;
position: static !important;
}

[Rue Nel]

Hello There,

I have compared your site in Chrome and Safari.
This is what I see: http://prntscr.com/b8jg9x

Are you using CloudFlare or may have installed a caching plugin like WordFence, W3 Total Cache or WP Super Cache? Please keep in mind that after doing every updates or making changes, always remember to clear all caches when updating so that the code from the latest release is always in use. This will help you to avoid any potential errors.

Please let us know how it goes.

[irudhayaraj]

Hello,

I have not installed any of the plugins you have mentioned.

however the nabbar, mega menu and the shopping cart icon is not the same in chrome and safari. I cleared all the caches and checked. Still the font weight for the megamenu is not the same as chrome.

[Rue Nel]

Hello There,

Could please update your code and use this instead:

.x-navbar .x-nav li > a > span {
  -webkit-transform: none !important;
  transform: none !important;
  position: static !important;
}

Please let us know if this works out for you.

[irudhayaraj]

updated the code with the one you have mentioned and the issue is not fixed. In chrome its absolutely fine but in safari the font weight and shopping cart icon is not the same as chrome.

[Paul R]

Hi,

You can try this code instead.

html  *,
body {
    -webkit-font-smoothing: subpixel-antialiased!important;
}

Hope that helps.

[irudhayaraj]

Hello Paul,

That code fixed the menu and megamenu. But the shopping cart is still off between chrome and safari.
Thanks a lot for the menu fix. Would be great if you could help with the shopping cart icon.

[Paul R]

Hi,

To fix it, you can add this under Custom > CSS in the Customizer.

.x-navbar .x-nav > li.x-menu-item-woocommerce > a .x-cart {
   border-color:transparent;
   background-color:transparent;
}

Hope that helps.

[irudhayaraj]

That fixed the shopping cart as well.

Thanks a lot for your help.

[Rupok]

You are welcome!

Glad that it helped. Feel free to let us know if you face any other issue. We’ll be happy to assist you.

Thanks for using X.

Cheers!

[Author]

Posts