Kendo Menu lost color in 2019.1.115

[Henrik]

High,

I just updated to 2019.1.115 and have a problem with the Kendo Menu. The links have lost their blue color. See the attached screenshots for the difference. Other links are blue as expected. Can you please help me restore the blue color to the links in the Menu control?

 

Best regards,

Henrik

[Preslav]

Hello Henrik,

Based on the provided screencasts I assume that your project uses the Bootstrap-v3 theme. Please correct me if I am wrong.

I tested the Basic usage demo of the Menu with the 2018.3.1017 version, and it seems that the colors of the links the same:

• https://dojo.telerik.com/uCUKEniB

Having said that, could you please elaborate on if you are using custom styles to apply the blue color? If yes, please share them with me.

I look forward to hearing from you.


Regards,
Preslav
Progress Telerik

[Henrik]

Hi Preslav,

I use Bootstrap 3 in one project and I have updated one to Bootstrap 4.2.1, The behaviour is the same in both projects.Links are blue with 2018.3.1017 and black with 2019.1.115.

As far as I know we do not do anything to set the color of the links in the menu, they have always been blue, which is the way I want it.

If you can help me get the blue color back I would really appreciate it.

Best regards,

Henrik

[Henrik]

Hi again,

Examining the two versions with the debugger tools in IE I see that in the 2018 version there is a css entry that is missing in the 2019 version:

k-link:link, k-link:visited, k-nav.current.k-state-hover .k-link{
 color:#428bca
}

This is in Kendo-bootstrap-min.css, line 3281, Column: 24

I don't know if this is any help for you.

Best regards,

Henrik

[Preslav]

Hi Henrik,

I checked the styles again, and it seems that this CSS should not affect the overall look.

To change the colors of the menu, I would suggest adding the following CSS to your styles:

<style>
  .k-menu .k-item>.k-link {
    color: #428bca;
  }
</style>

Regards,
Preslav
Progress Telerik

[Henrik]

Hi again,

Thanks for the suggestion, but your CSS turned everything blue, both links and the items that are not links. We have temporarily solved it with this:

.k-link:link, .k-link:visited, .k-nav-current.k-state-hover .k-link {
    color: #428bca !important;
}

This CSS makes the menu look just like it was in the prevoius Telerik version. But I had to resort to !important to solve the problem.

Thanks for you help!

Henrik

[Devin]

Confirmed that this is an issue with 2019.1.220 using Telerik reporting. The toolbar has lost all custom theme colors after this update because of some CSS changes made by Telerik. The old version set ".k-link:link" to use the theme color, and the current version just uses ".k-link", so my toolbar buttons are black and larger than before and look ugly. I use a LESS theme.

[Devin]

Uploaded the images again, accidentally uploaded 2019.1.220 twice above

[Devin]

Added the 2018.3.911 Chrome CSS screenshot that I accidentally didn't upload above

[Devin]

One more try, the forum crashes every time I try to post this attachment...

[Teya]

Hello Devin and Henrik,

I am stepping in for my colleague Preslav who is currently out of the office.

Thank you for the screenshots, it helped me understand what issue exactly you were referring to and indeed you are correct. In Kendo version 2018.3.911 the links within the menu used to have a blue color. I have logged in this issue in our public repository and you can follow it here:

https://github.com/telerik/kendo-ui-core/issues/4984

In the meantime, in order to change only the colors of the links in the menu, instead of using !important, I would suggest increasing the specificity of the CSS link selector which will make it stronger. What I mean is adding the .k-menu class in front of the link selectors:

.k-menu .k-link:link,
.k-menu .k-link:visited,
.k-menu .k-nav-current.k-state-hover .k-link {

  color: #428bca;

}

I have created the following Dojo where you can see this live:

https://dojo.telerik.com/uCUKEniB/8

I hope this would work out for you.


Regards,
Teya
Progress Telerik

[Devin]

Thanks, I've done something similar as a temporarily fix.