Menu items dissapeared after chrome update

Dear support,

My google chrome was updated yesterday, and now I noticed that my menu items aren’t visible anymore. I didn’t change anything to my website.

I use the following code to color my menu items:

     .menu-item-9 {
     background: -webkit-linear-gradient(left, #ff2828 , #F27B26);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     }

When I remove this custom CSS and us the default color for the menu items, the items do appear in the normal color.

I hope you can help me!

Best,
Maarten

Hello Maarten,

Please share a link to your site, so I can have a look directly.

Regards,
Kharis

Ooh of course, I forgot.

Thank you for sharing.

Try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.

.nav-menu > li {
  -webkit-text-fill-color: unset !important;
}

Not really sure we should disable text fill color on your site. Because the issue doesn’t present on our demo site https://demo.athemes.com/moesia/ when I visited it with latest Chrome.

Regards,
Kharis

Thank you.

I added the code, but the menu items now have the plain #ff2828 color I have set as default. And not the linear gradient color I added via custom CSS.

Could you make the linear gradient color work?

Please share your code. Maybe there’s something I could correct.

Regards,
Kharis

Thank you! This is my code:

    .menu-item-9 {
    background: -webkit-linear-gradient(left, #ff2828 , #F27B26);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .menu-item-11 {
    background: -webkit-linear-gradient(left, #ff2828 , #F27B26);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .menu-item-1834 {
    background: -webkit-linear-gradient(left, #ff2828 , #F27B26);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .menu-item-466 {
    background: -webkit-linear-gradient(left, #ff2828 , #F27B26);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

Thank you for sharing. Try removing them all and replacing with this one:

    .main-navigation li a {
       background: -webkit-linear-gradient(left, #ff2828 , #F27B26);
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;  
    }

Regards,
Kharis

Great, it worked! Thanks a lot!

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis