cancel
Showing results for 
Search instead for 
Did you mean: 
Security Alert Log4j Security Vulnerability. Click here to know more.
cancel
Showing results for 
Search instead for 
Did you mean: 

applying css to menu

AA_9925011
4-Participant

applying css to menu

Hi 

I am trying to change the text color of the menu  using custom CSS while hovering but not getting any solutions can somebody help on this..

Thanks in advance

1 ACCEPTED SOLUTION

Accepted Solutions
Sruthi
14-Alexandrite
(To:AA_9925011)

This code is working for me. Try it

 

.widget-menu-runtime:not([themable]) .widget-menu li:hover {
background: rgb(229, 229, 229);
filter: none;
-webkit-text-fill-color: blue;
}

 

View solution in original post

7 REPLIES 7
yhan
17-Peridot
(To:AA_9925011)

Hi @AA_9925011,

 

Why not using Style Properties > MenuHoverStyle to change font color when hovering the menu widget?

 

Thanks,

/Yoyo

AA_9925011
4-Participant
(To:yhan)

We are trying for dynamic color change on the menu text while hovering..we
have already tried with style themes that dint work so trying with css code.

Thanks in advance.
yhan
17-Peridot
(To:AA_9925011)

You can try below css code, it takes effect in my environment:

.widget-menu-runtime:not([themable]) .widget-menu li:hover span{
color:red;
}

5-17-2021 10-11-10 AM.jpg

AA_9925011
4-Participant
(To:yhan)

I tried this code ,but it is not working.
yhan
17-Peridot
(To:AA_9925011)

I'm not sure whether you use a menu widget to build the menu, could you follow the below steps and let us know the CSS element of your menu?

1.Run Preview of your mashup
2.Press F12 on the keyboard to open Developer Tools
3.In Elements, use "ctrl+shift+c" to select an element on the page to inspect it
4.In Preview window move mouse cursor hover menu widget
5.We can see the CSS class, make the screenshot, and provide it to us

AA_9925011
4-Participant
(To:yhan)

please find the screenshots attached

Sruthi
14-Alexandrite
(To:AA_9925011)

This code is working for me. Try it

 

.widget-menu-runtime:not([themable]) .widget-menu li:hover {
background: rgb(229, 229, 229);
filter: none;
-webkit-text-fill-color: blue;
}

 

View solution in original post

Announcements