change hover link color

quite basic, relatively new

i have a particular problem where when i hover with my mouse over the links in the menu, the secondary color (onhover) is exactly the same as my menu background color. how do i disable (using CSS? or any other method) or customize the colour (to white lets say), so that this problem is solved? adding pictures for clarity (second picture is a recreaction since printscreen doesn't capture the mouse icon :) ).

thanks in advance!


Your question is more CSS related than Outsystems.

1- you need to find out which part in the CSS makes the font-color of your link that color while hovering.

-> in chrome, right click your mouse and select Inspect.  With the button i have circled you can go to select mode and click the part in your web that you need to find out. 

2- when you have found out 1, you need to put in css with higher specificity for your problem. To find out how:

https://www.w3schools.com/css/css_specificity.asp


Its quote a lot to explain here on how to find this, if your CSS knowledge is next to none, but i hope this helps you a but.

Good luck!

Thanks for your answers,

you were right, in the end of it all i used this lesson: https://www.youtube.com/watch?v=_cy3geFqf8c&ab_channel=OutSystems

and your method to create the following CSS:

.layout:not(.layout-side) .app-menu-links a {
    border-bottom: var(--border-size-m) solid transparent;
    color: white;
}

Hi,

Try applying below css - give color as per your requirement.

Thanks,

Vani

Your question is more CSS related than Outsystems.

1- you need to find out which part in the CSS makes the font-color of your link that color while hovering.

-> in chrome, right click your mouse and select Inspect.  With the button i have circled you can go to select mode and click the part in your web that you need to find out. 

2- when you have found out 1, you need to put in css with higher specificity for your problem. To find out how:

https://www.w3schools.com/css/css_specificity.asp


Its quote a lot to explain here on how to find this, if your CSS knowledge is next to none, but i hope this helps you a but.

Good luck!

Thanks for your answers,

you were right, in the end of it all i used this lesson: https://www.youtube.com/watch?v=_cy3geFqf8c&ab_channel=OutSystems

and your method to create the following CSS:

.layout:not(.layout-side) .app-menu-links a {
    border-bottom: var(--border-size-m) solid transparent;
    color: white;
}
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.